@oliasoft-open-source/charts-library 4.2.0 → 4.3.0-beta-1

package/dist/index.js

@@ -22080,6 +22080,7 @@ const SAVE_INITIAL_AXES_RANGES = "SAVE_INITIAL_AXES_RANGES";
 const RESET_AXES_RANGES = "RESET_AXES_RANGES";
 const UPDATE_AXES_RANGES = "UPDATE_AXES_RANGES";
 const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
+const TOGGLE_DRAG_ANNOTATION = "TOGGLE_DRAG_ANNOTATION";
 const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";
 const reducer$1 = (state, action) => {
   return produce(state, (draft) => {
@@ -22148,6 +22149,16 @@ const reducer$1 = (state, action) => {
         }
         break;
       }
+      case TOGGLE_DRAG_ANNOTATION: {
+        draft.enableDragAnnotation = !draft.enableDragAnnotation;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        break;
+      }
       case DISABLE_DRAG_OPTIONS: {
         if (draft.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
           draft.enableDragPoints = false;
@@ -22208,13 +22219,13 @@ var AlignOptions = /* @__PURE__ */ ((AlignOptions2) => {
   AlignOptions2["Left"] = "left";
   return AlignOptions2;
 })(AlignOptions || {});
-var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
+var AnnotationType$1 = /* @__PURE__ */ ((AnnotationType2) => {
   AnnotationType2["Box"] = "box";
   AnnotationType2["Ellipse"] = "ellipse";
   AnnotationType2["Line"] = "line";
   AnnotationType2["Text"] = "text";
   return AnnotationType2;
-})(AnnotationType || {});
+})(AnnotationType$1 || {});
 var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
   PointStyle2["Circle"] = "circle";
   return PointStyle2;
@@ -22567,7 +22578,8 @@ const initialState = ({ options, persistenceId }) => {
     axes,
     chartOptions: { enableZoom, enablePan, showPoints, showLine },
     legend: { display },
-    dragData
+    dragData,
+    annotations: { enableDragAnnotation }
   } = options;
   const getStateAxesByType = (axisType, customAxesRange2) => {
     var _a2, _b2, _c2, _d2, _e2;
@@ -22614,7 +22626,8 @@ const initialState = ({ options, persistenceId }) => {
     pointsEnabled,
     lineEnabled,
     legendEnabled,
-    enableDragPoints
+    enableDragPoints,
+    enableDragAnnotation: enableDragAnnotationStorage
   } = getChartStateFromStorage(persistenceId) || {};
   return {
     zoomEnabled: zoomEnabled ?? enableZoom,
@@ -22625,6 +22638,7 @@ const initialState = ({ options, persistenceId }) => {
     axes: stateAxes,
     showTable: false,
     enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
+    enableDragAnnotation: enableDragAnnotation && enableDragAnnotationStorage,
     initialAxesRanges: []
   };
 };
@@ -22784,7 +22798,10 @@ const DragOptions = ({
   panEnabled,
   zoomEnabled,
   enableDragPoints,
+  enableDragAnnotation,
   isDragDataAllowed,
+  isDragAnnotationAllowed,
+  onToggleDragAnnotation,
   onToggleDragPoints,
   onDisableDragOptions,
   translations: {
@@ -22793,7 +22810,8 @@ const DragOptions = ({
     dragToPan,
     orDoubleClickToCanvas,
     dragToMovePoints,
-    dragDisabled
+    dragDisabled,
+    dragToMoveAnnotation
   }
 }) => {
   const options = useMemo(
@@ -22827,10 +22845,19 @@ const DragOptions = ({
           onClick: onToggleDragPoints
         }
       ] : [],
+      ...isDragAnnotationAllowed ? [
+        {
+          label: dragToMoveAnnotation,
+          icon: /* @__PURE__ */ jsx(TbHandStop, {}),
+          selected: enableDragAnnotation,
+          type: "Option",
+          onClick: onToggleDragAnnotation
+        }
+      ] : [],
       {
         label: dragDisabled,
         icon: /* @__PURE__ */ jsx(TbBan, {}),
-        selected: !zoomEnabled && !panEnabled && !enableDragPoints,
+        selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
         onClick: onDisableDragOptions
       }
     ],
@@ -22887,6 +22914,7 @@ const useToggleHandlers = (dispatch) => {
     onToggleTable: createToggleHandler(TOGGLE_TABLE),
     onToggleZoom: createToggleHandler(TOGGLE_ZOOM),
     onToggleDragPoints: createToggleHandler(TOGGLE_DRAG_POINTS),
+    onToggleDragAnnotation: createToggleHandler(TOGGLE_DRAG_ANNOTATION),
     onDisableDragOptions: createToggleHandler(DISABLE_DRAG_OPTIONS)
   };
   return toggleHandlers;
@@ -24307,9 +24335,10 @@ const Controls = ({
     panEnabled,
     pointsEnabled,
     showTable,
-    zoomEnabled
+    zoomEnabled,
+    enableDragAnnotation
   } = state;
-  const { dragData, depthType } = options;
+  const { dragData, depthType, annotations } = options;
   const {
     onToggleLine,
     onTogglePan,
@@ -24317,6 +24346,7 @@ const Controls = ({
     onToggleTable,
     onToggleZoom,
     onToggleDragPoints,
+    onToggleDragAnnotation,
     onDisableDragOptions
   } = useToggleHandlers(dispatch);
   const { handleDownload, controlsAxesLabels, onResetAxes, onUpdateAxes } = useChartFunctions({
@@ -24380,7 +24410,10 @@ const Controls = ({
               onTogglePan,
               onToggleZoom,
               enableDragPoints,
+              enableDragAnnotation,
               isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
+              isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
+              onToggleDragAnnotation,
               onToggleDragPoints,
               onDisableDragOptions,
               translations
@@ -24490,6 +24523,7 @@ const defaultAnnotations$1 = (annotations) => {
     },
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
+    enableDragAnnotation: (annotations == null ? void 0 : annotations.enableDragAnnotation) ?? false,
     annotationsData: defaultAnnotationsData$1(annotations == null ? void 0 : annotations.annotationsData)
   };
 };
@@ -25140,6 +25174,19 @@ const legendReducer = (state, action) => {
       return state;
   }
 };
+var MouseEvents = /* @__PURE__ */ ((MouseEvents2) => {
+  MouseEvents2["MOUSEDOWN"] = "mousedown";
+  MouseEvents2["MOUSEMOVE"] = "mousemove";
+  MouseEvents2["MOUSEUP"] = "mouseup";
+  return MouseEvents2;
+})(MouseEvents || {});
+var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
+  AnnotationType2["POINT"] = "point";
+  AnnotationType2["BOX"] = "box";
+  AnnotationType2["LINE"] = "line";
+  AnnotationType2["ELLIPSE"] = "ellipse";
+  return AnnotationType2;
+})(AnnotationType || {});
 const annotationEnter = (element, chart2) => {
   var _a2;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
@@ -25172,9 +25219,13 @@ const generateAnnotations = (annotationsData) => {
     const color2 = (ann == null ? void 0 : ann.color) || COLORS[idx];
     const type = (ann == null ? void 0 : ann.type) || "line";
     const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
-    const borderColor = type === "line" ? color2 : "transparent";
-    const borderWidth = type === "line" ? BORDER_WIDTH.INITIAL : 0;
-    const borderDash = ANNOTATION_DASH;
+    const borderColor = {
+      [AnnotationType.LINE]: color2,
+      [AnnotationType.POINT]: color2,
+      [AnnotationType.BOX]: color2
+    }[type] || "transparent";
+    const borderWidth = type == "line" ? BORDER_WIDTH.INITIAL : 0;
+    const borderDash = type == "line" ? ANNOTATION_DASH : void 0;
     const label = type === "line" ? {
       backgroundColor: color2,
       content: ann == null ? void 0 : ann.label,
@@ -25190,7 +25241,7 @@ const generateAnnotations = (annotationsData) => {
     }, {
       chart: chart2
     }) => {
-      if (type !== "line")
+      if (type !== "line" && !ann.enableDrag)
         return;
       annotationEnter(element, chart2);
     };
@@ -25199,10 +25250,13 @@ const generateAnnotations = (annotationsData) => {
     }, {
       chart: chart2
     }) => {
-      if (type !== "line")
+      if (type !== "line" && !ann.enableDrag)
         return;
       annotationLeave(element, chart2);
     };
+    const onDragStart = () => (cord) => (ann == null ? void 0 : ann.onDragStart) ? ann == null ? void 0 : ann.onDragStart(cord) : void 0;
+    const onDrag = () => (cord) => (ann == null ? void 0 : ann.onDrag) ? ann == null ? void 0 : ann.onDrag(cord) : void 0;
+    const onDragEnd = () => (cord) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord) : void 0;
     return {
       ...ann,
       display: ann == null ? void 0 : ann.display,
@@ -25217,7 +25271,10 @@ const generateAnnotations = (annotationsData) => {
       type,
       adjustScaleRange: adjustScaleRange2,
       enter,
-      leave
+      leave,
+      onDragStart,
+      onDrag,
+      onDragEnd
     };
   });
 };
@@ -25413,6 +25470,9 @@ const useChartOptions = ({
   );
   const plugins = {
     datalabels,
+    annotationDraggerPlugin: {
+      enabled: state.enableDragAnnotation
+    },
     annotation: toAnnotationObject(annotation2),
     zoom: { pan: panOptions, zoom: zoomOptions },
     tooltip,
@@ -25769,6 +25829,224 @@ const chartAreaTextPlugin = {
     });
   }
 };
+const getMousePositionInCoordinates = (event, canvas2, scales) => {
+  var _a2, _b2;
+  const rect = canvas2.getBoundingClientRect();
+  const x2 = event.clientX - rect.left;
+  const y2 = event.clientY - rect.top;
+  const xValue = ((_a2 = scales == null ? void 0 : scales.x) == null ? void 0 : _a2.getValueForPixel(x2)) ?? -1;
+  const yValue = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getValueForPixel(y2)) ?? -1;
+  return { x: xValue, y: yValue };
+};
+const getActiveAnnotation = (x2, y2, annotations) => {
+  var _a2;
+  return ((_a2 = Object.values(annotations)) == null ? void 0 : _a2.find((annotation2) => {
+    const { xMin, xMax, yMin, yMax, xValue, yValue } = annotation2 ?? {};
+    let condtion;
+    if (xMin && xMax && yMin && yMax && (annotation2 == null ? void 0 : annotation2.type) === AnnotationType.BOX) {
+      condtion = x2 >= xMin && x2 <= xMax && y2 >= yMin && y2 <= yMax;
+    } else if (xValue && yValue && (annotation2 == null ? void 0 : annotation2.type) === AnnotationType.POINT) {
+      condtion = x2 >= xValue - 2 && x2 <= xValue + 2 && y2 >= yValue - 2 && y2 <= yValue + 2;
+    }
+    return condtion;
+  })) ?? {};
+};
+const calculateAnnotationMetricsInValues = (annotation2) => {
+  const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
+  let centerX;
+  let centerY;
+  let width;
+  let height;
+  if (xMin && xMax && yMin && yMax && type === AnnotationType.BOX) {
+    centerX = (xMin + xMax) / 2;
+    centerY = (yMin + yMax) / 2;
+    width = xMax - xMin;
+    height = yMax - yMin;
+  } else if (xValue && yValue && type === AnnotationType.POINT) {
+    centerX = xValue;
+    centerY = yValue;
+    width = 0;
+    height = 0;
+  }
+  return {
+    centerX,
+    centerY,
+    width,
+    height
+  };
+};
+const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
+  var _a2, _b2, _c2, _d2;
+  const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
+  const { x: x2, y: y2 } = scales ?? {};
+  let centerX;
+  let centerY;
+  let width;
+  let height;
+  if (xMin && xMax && yMin && yMax && type === AnnotationType.BOX) {
+    const xCenterValue = (xMin + xMax) / 2;
+    const yCenterValue = (yMin + yMax) / 2;
+    const xMinValue = (x2 == null ? void 0 : x2.getPixelForValue(xMin)) ?? 0;
+    const xMaxValue = (x2 == null ? void 0 : x2.getPixelForValue(xMax)) ?? 0;
+    const yMinValue = (y2 == null ? void 0 : y2.getPixelForValue(yMin)) ?? 0;
+    const yMaxValue = (y2 == null ? void 0 : y2.getPixelForValue(yMax)) ?? 0;
+    width = xMinValue - xMaxValue;
+    height = yMinValue - yMaxValue;
+    centerX = ((_a2 = scales == null ? void 0 : scales.x) == null ? void 0 : _a2.getPixelForValue(xCenterValue)) ?? -1;
+    centerY = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getPixelForValue(yCenterValue)) ?? -1;
+  } else if (xValue && yValue && type === AnnotationType.POINT) {
+    width = 0;
+    height = 0;
+    centerX = ((_c2 = scales == null ? void 0 : scales.x) == null ? void 0 : _c2.getPixelForValue(xValue)) ?? -1;
+    centerY = ((_d2 = scales == null ? void 0 : scales.y) == null ? void 0 : _d2.getPixelForValue(yValue)) ?? -1;
+  }
+  return {
+    centerX,
+    centerY,
+    width,
+    height
+  };
+};
+const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState) => {
+  const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
+  const annotation2 = getActiveAnnotation(x2, y2, annotations);
+  const metrics = calculateAnnotationMetricsInValues(annotation2);
+  console.log(cloneDeep(annotations));
+  console.log(metrics);
+  if (annotation2 && annotation2.enableDrag && metrics.centerY && metrics.centerX) {
+    const dragStartX = x2 - metrics.centerX;
+    const dragStartY = y2 - metrics.centerY;
+    setDraggingState(true, annotation2, dragStartX, dragStartY);
+    if (annotation2 == null ? void 0 : annotation2.onDragStart) {
+      annotation2.onDragStart({ x: x2, y: y2 });
+    }
+  }
+};
+const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAnnotation, dragStartX, dragStartY, chart2) => {
+  if (isDragging2 && activeAnnotation) {
+    const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
+    const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
+    let newCenterX = x2 - dragStartX;
+    let newCenterY = y2 - dragStartY;
+    if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
+      newCenterX = x2 - dragStartX;
+      newCenterY = y2 - dragStartY;
+      activeAnnotation.xValue = newCenterX;
+      activeAnnotation.yValue = newCenterY;
+    } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
+      if ((metrics == null ? void 0 : metrics.width) && metrics.height) {
+        activeAnnotation.xMin = newCenterX - metrics.width / 2;
+        activeAnnotation.xMax = newCenterX + metrics.width / 2;
+        activeAnnotation.yMin = newCenterY - metrics.height / 2;
+        activeAnnotation.yMax = newCenterY + metrics.height / 2;
+      }
+    }
+    chart2.update();
+    if (activeAnnotation == null ? void 0 : activeAnnotation.onDrag) {
+      activeAnnotation.onDrag({ x: x2, y: y2 });
+    }
+    const { ctx, width, height } = chart2;
+    const { centerX, centerY } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
+    const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(activeAnnotation, scales);
+    if (centerX && centerY && xValue && yValue) {
+      ctx.save();
+      ctx.clearRect(0, 0, width, height);
+      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;
+      }
+      ctx.fillText(labelText, labelX, labelY);
+      ctx.restore();
+    }
+  }
+};
+const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDraggingState) => {
+  if (isDragging2) {
+    if (activeAnnotation) {
+      const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
+      if (activeAnnotation == null ? void 0 : activeAnnotation.onDragEnd) {
+        activeAnnotation.onDragEnd({ x: centerX, y: centerY });
+      }
+      setDraggingState(false, null);
+    }
+    chart2.update();
+  }
+};
+const annotationDraggerPlugin = {
+  id: "annotationDraggerPlugin",
+  afterUpdate(chart2) {
+    var _a2, _b2, _c2, _d2;
+    const { canvas: canvas2, scales } = chart2;
+    const pluginOptions = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotationDraggerPlugin) || {
+      enabled: false
+    };
+    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 (!annotations)
+      return;
+    let isDragging2 = false;
+    let dragStartX, dragStartY;
+    let activeAnnotation = null;
+    const setDraggingState = (dragging, annotation2, startX, startY) => {
+      isDragging2 = dragging;
+      activeAnnotation = annotation2;
+      if (startX !== void 0 && startY !== void 0) {
+        dragStartX = startX;
+        dragStartY = startY;
+      }
+    };
+    if (!canvas2.dataset.annotationDraggerInitialized && pluginOptions.enabled) {
+      canvas2.addEventListener(MouseEvents.MOUSEDOWN, (event) => {
+        handleAnnotationMouseDown(
+          event,
+          canvas2,
+          typedScales,
+          annotations,
+          setDraggingState
+        );
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEMOVE, (event) => {
+        handleAnnotationMouseMove(
+          event,
+          canvas2,
+          typedScales,
+          isDragging2,
+          activeAnnotation,
+          dragStartX,
+          dragStartY,
+          chart2
+        );
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEUP, () => {
+        handleAnnotationMouseUp(
+          isDragging2,
+          activeAnnotation,
+          chart2,
+          setDraggingState
+        );
+      });
+      canvas2.dataset.annotationDraggerInitialized = "true";
+    }
+    if (!pluginOptions.enabled) {
+      canvas2.removeEventListener(MouseEvents.MOUSEDOWN, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEMOVE, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEUP, () => {
+      });
+      canvas2.dataset.annotationDraggerInitialized = "";
+    }
+  }
+};
 var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
   defaultTranslations2["label"] = "Label";
   defaultTranslations2["pointsLines"] = "Points & lines";
@@ -25783,6 +26061,7 @@ var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
   defaultTranslations2["dragToZoom"] = "Drag to zoom";
   defaultTranslations2["dragToPan"] = "Drag to pan";
   defaultTranslations2["dragToMovePoints"] = "Drag to move points";
+  defaultTranslations2["dragToMoveAnnotation"] = "Drag to move annotation";
   defaultTranslations2["dragDisabled"] = "Drag disabled";
   defaultTranslations2["hideLegend"] = "Hide Legend";
   defaultTranslations2["showLegend"] = "Show Legend";
@@ -25960,10 +26239,10 @@ const BoxItem = ({ dataset }) => {
 const LegendItemLine = ({ dataset }) => {
   const { annotationType, showLine } = dataset;
   switch (annotationType) {
-    case AnnotationType.Box:
-    case AnnotationType.Ellipse:
+    case AnnotationType$1.Box:
+    case AnnotationType$1.Ellipse:
       return /* @__PURE__ */ jsx(BoxItem, { dataset });
-    case AnnotationType.Line:
+    case AnnotationType$1.Line:
       return /* @__PURE__ */ jsx(LineItem, { dataset });
     default:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -26261,7 +26540,8 @@ Chart$2.register(
   plugin$1,
   plugin,
   annotation,
-  chartAreaTextPlugin
+  chartAreaTextPlugin,
+  annotationDraggerPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;
@@ -26367,6 +26647,7 @@ const LineChart = (props) => {
     },
     generateKey([
       state.enableDragPoints,
+      state.enableDragAnnotation,
       state.zoomEnabled,
       state.panEnabled,
       languageKey