@mui/x-charts 8.0.0-alpha.12 → 8.0.0-alpha.14

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -14,6 +14,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
+var _defaultizeMargin = require("../../../defaultizeMargin");
 const MAX_COMPUTE_RUN = 10;
 const useChartDimensions = ({
   params,
@@ -39,36 +40,53 @@ const useChartDimensions = ({
     const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
     const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
     store.update(prev => {
-      const prevWidth = prev.dimensions.width + prev.dimensions.left + prev.dimensions.right;
-      const prevHeight = prev.dimensions.height + prev.dimensions.top + prev.dimensions.bottom;
-      if (prevWidth === newWidth && prevHeight === newHeight) {
+      if (prev.dimensions.width === newWidth && prev.dimensions.height === newHeight) {
         return prev;
       }
       return (0, _extends2.default)({}, prev, {
-        dimensions: (0, _extends2.default)({}, prev.dimensions, {
-          width: newWidth - prev.dimensions.left - prev.dimensions.right,
-          height: newHeight - prev.dimensions.top - prev.dimensions.bottom
-        })
+        dimensions: {
+          margin: {
+            top: params.margin.top,
+            right: params.margin.right,
+            bottom: params.margin.bottom,
+            left: params.margin.left
+          },
+          width: params.width ?? newWidth,
+          height: params.height ?? newHeight,
+          propsWidth: params.width,
+          propsHeight: params.height
+        }
       });
     });
     return {
       height: newHeight,
       width: newWidth
     };
-  }, [store, svgRef]);
-  store.update(prev => {
-    if ((params.width === undefined || prev.dimensions.propsWidth === params.width) && (params.height === undefined || prev.dimensions.propsHeight === params.height)) {
-      return prev;
-    }
-    return (0, _extends2.default)({}, prev, {
-      dimensions: (0, _extends2.default)({}, prev.dimensions, {
-        width: params.width === undefined ? prev.dimensions.width : params.width - prev.dimensions.left - prev.dimensions.right,
-        height: params.height === undefined ? prev.dimensions.height : params.height - prev.dimensions.top - prev.dimensions.bottom,
-        propsWidth: params.width,
-        propsHeight: params.height
-      })
+  }, [store, svgRef, params.height, params.width,
+  // Margin is an object, so we need to include all the properties to prevent infinite loops.
+  params.margin.left, params.margin.right, params.margin.top, params.margin.bottom]);
+  React.useEffect(() => {
+    store.update(prev => {
+      const width = params.width ?? prev.dimensions.width;
+      const height = params.height ?? prev.dimensions.height;
+      return (0, _extends2.default)({}, prev, {
+        dimensions: {
+          margin: {
+            top: params.margin.top,
+            right: params.margin.right,
+            bottom: params.margin.bottom,
+            left: params.margin.left
+          },
+          width,
+          height,
+          propsHeight: params.height,
+          propsWidth: params.width
+        }
+      });
     });
-  });
+  }, [store, params.height, params.width,
+  // Margin is an object, so we need to include all the properties to prevent infinite loops.
+  params.margin.left, params.margin.right, params.margin.top, params.margin.bottom]);
   React.useEffect(() => {
     // Ensure the error detection occurs after the first rendering.
     stateRef.current.displayError = true;
@@ -141,7 +159,7 @@ const useChartDimensions = ({
     if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = (0, _useChartDimensions.selectorChartDimensionsState)(store.value);
+    const drawingArea = (0, _useChartDimensions.selectorChartDrawingArea)(store.value);
     const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
     const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
     if (options?.direction === 'x') {
@@ -167,17 +185,20 @@ useChartDimensions.params = {
 useChartDimensions.getDefaultizedParams = ({
   params
 }) => (0, _extends2.default)({}, params, {
-  margin: params.margin ? (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, params.margin) : _constants.DEFAULT_MARGINS
+  margin: (0, _defaultizeMargin.defaultizeMargin)(params.margin, _constants.DEFAULT_MARGINS)
 });
 useChartDimensions.getInitialState = ({
   width,
   height,
   margin
-}) => ({
-  dimensions: (0, _extends2.default)({}, margin, {
-    width: (width ?? 0) - margin.left - margin.right,
-    height: (height ?? 0) - margin.top - margin.bottom,
-    propsWidth: width,
-    propsHeight: height
-  })
-});
+}) => {
+  return {
+    dimensions: {
+      margin,
+      width: width ?? 0,
+      height: height ?? 0,
+      propsWidth: width,
+      propsHeight: height
+    }
+  };
+};