Merge 146d325 into 23d543a

package.json

@@ -34,6 +34,7 @@
     "@turf/intersect": "^6.3.0",
     "@turf/invariant": "^6.3.0",
     "@turf/union": "^6.3.0",
+    "@turf/kinks": "^6.3.0",
     "dequal": "^2.0.2",
     "echarts": "^5.4.2",
     "echarts-for-react": "^3.0.2",

packages/react-api/src/hooks/useCartoLayerProps.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { selectSpatialFilter, selectViewport } from '@carto/react-redux';
+import { selectValidSpatialFilter, selectViewport } from '@carto/react-redux';
 import useGeojsonFeatures from './useGeojsonFeatures';
 import useTileFeatures from './useTileFeatures';
 import { getDataFilterExtensionProps } from './dataFilterExtensionUtil';
@@ -18,7 +18,9 @@ export default function useCartoLayerProps({
   viewporFeaturesDebounceTimeout = 250
 }) {
   const viewport = useSelector(selectViewport);
-  const spatialFilter = useSelector((state) => selectSpatialFilter(state, source?.id));
+  const spatialFilter = useSelector((state) =>
+    selectValidSpatialFilter(state, source?.id)
+  );
 
   const [onDataLoadForGeojson] = useGeojsonFeatures({
     source,

packages/react-redux/src/slices/cartoSlice.d.ts

@@ -169,4 +169,9 @@ export function selectSpatialFilter(
   sourceId?: string
 ): Feature<Polygon | MultiPolygon> | null;
 
+export function selectValidSpatialFilter(
+  state: any,
+  sourceId?: string
+): Feature<Polygon | MultiPolygon> | null;
+
 export function selectFeatureSelectionMode(state: any): string | null;

packages/react-redux/src/slices/cartoSlice.js

@@ -381,6 +381,15 @@ export const selectSpatialFilter = (state, sourceId) => {
     : spatialFilterGeometry;
 };
 
+/**
+ * Redux selector to select the spatial filter of a given sourceId or the root one.
+ * This selector returns null if the spatial filter is invalid (if it intersetcs itself)
+ */
+export const selectValidSpatialFilter = (state, sourceId) => {
+  const spatialFilter = selectSpatialFilter(state, sourceId);
+  return spatialFilter?.properties?.isInvalid ? null : spatialFilter;
+};
+
 /**
  * Redux selector to select the feature selection mode based on if it's enabled
  */

packages/react-widgets/package.json

@@ -81,6 +81,7 @@
     "@mui/material": "^5.11.16",
     "@nebula.gl/edit-modes": "^1.0.4",
     "@nebula.gl/layers": "^1.0.4",
+    "@turf/kinks": "^6.3.0",
     "dequal": "^2.0.2",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",

packages/react-widgets/src/hooks/useWidgetFetch.js

@@ -6,7 +6,7 @@ import {
 } from '@carto/react-core';
 import {
   selectAreFeaturesReadyForSource,
-  selectSpatialFilter,
+  selectValidSpatialFilter,
   selectViewport
 } from '@carto/react-redux';
 import { dequal } from 'dequal';
@@ -85,7 +85,9 @@ export default function useWidgetFetch(
   );
 
   const viewport = useSelector(selectViewport);
-  const spatialFilter = useSelector((state) => selectSpatialFilter(state, dataSource));
+  const spatialFilter = useSelector((state) =>
+    selectValidSpatialFilter(state, dataSource)
+  );
   const geometryToIntersect = useMemo(
     () => selectGeometryToIntersect(global, viewport, spatialFilter),
     [global, viewport, spatialFilter]

packages/react-widgets/src/layers/FeatureSelectionLayer.js

@@ -12,6 +12,7 @@ import { hexToRgb, useTheme } from '@mui/material';
 import EditableCartoGeoJsonLayer from './EditableCartoGeoJsonLayer';
 import useEventManager from './useEventManager';
 import MaskLayer from './MaskLayer';
+import kinks from '@turf/kinks';
 
 const { ViewMode, TranslateMode, ModifyMode, CompositeMode } = nebulaModes;
 
@@ -58,8 +59,15 @@ export default function FeatureSelectionLayer(
 
   const primaryAsRgba = formatRGBA(hexToRgb(theme.palette.primary.main));
   const secondaryAsRgba = formatRGBA(hexToRgb(theme.palette.secondary.main));
+  const errorAsRgba = formatRGBA(hexToRgb(theme.palette.error.main));
 
-  const mainColor = hasGeometry && !isSelected ? secondaryAsRgba : primaryAsRgba;
+  let mainColor = primaryAsRgba;
+  if (hasGeometry && !isSelected) {
+    mainColor = secondaryAsRgba;
+  }
+  if (spatialFilterGeometry?.properties?.isInvalid) {
+    mainColor = errorAsRgba;
+  }
 
   return [
     mask && MaskLayer(),
@@ -92,6 +100,9 @@ export default function FeatureSelectionLayer(
           //     2. editType includes tentative, that means it's being drawn
           if (updatedData.features.length !== 0 && !editType.includes('Tentative')) {
             const [lastFeature] = updatedData.features.slice(-1);
+            const intersectionPoints = kinks(lastFeature).features.length;
+            lastFeature.properties.isInvalid = intersectionPoints > 0;
+
             if (lastFeature) {
               dispatch(
                 addSpatialFilter({

packages/react-widgets/src/layers/MaskLayer.js

@@ -1,10 +1,10 @@
 import { useSelector } from 'react-redux';
 import { SolidPolygonLayer } from '@deck.gl/layers/typed';
 import { MASK_ID } from '@carto/react-core/';
-import { selectSpatialFilter } from '@carto/react-redux/';
+import { selectValidSpatialFilter } from '@carto/react-redux/';
 
 export default function MaskLayer() {
-  const spatialFilterGeometry = useSelector((state) => selectSpatialFilter(state));
+  const spatialFilterGeometry = useSelector(selectValidSpatialFilter);
   const maskData = !!spatialFilterGeometry
     ? [{ polygon: spatialFilterGeometry?.geometry?.coordinates }]
     : [];

yarn.lock

@@ -4307,6 +4307,13 @@
   dependencies:
     "@turf/helpers" "^6.5.0"
 
+"@turf/kinks@^6.3.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/kinks/-/kinks-6.5.0.tgz#80e7456367535365012f658cf1a988b39a2c920b"
+  integrity sha512-ViCngdPt1eEL7hYUHR2eHR662GvCgTc35ZJFaNR6kRtr6D8plLaDju0FILeFFWSc+o8e3fwxZEJKmFj9IzPiIQ==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+
 "@turf/line-intersect@>=4.0.0", "@turf/line-intersect@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/line-intersect/-/line-intersect-6.5.0.tgz#dea48348b30c093715d2195d2dd7524aee4cf020"