From ffceee18a1a6756585875b4c96ceb8dec0fb19fb Mon Sep 17 00:00:00 2001 From: Felix Palmer Date: Mon, 28 Nov 2022 19:48:48 +0100 Subject: [PATCH 1/3] Don't needlessly render FeatureSelectionLayer --- .../src/layers/FeatureSelectionLayer.js | 105 +++++++++--------- 1 file changed, 53 insertions(+), 52 deletions(-) diff --git a/packages/react-widgets/src/layers/FeatureSelectionLayer.js b/packages/react-widgets/src/layers/FeatureSelectionLayer.js index 5de9a7cfc..87d3ba060 100644 --- a/packages/react-widgets/src/layers/FeatureSelectionLayer.js +++ b/packages/react-widgets/src/layers/FeatureSelectionLayer.js @@ -63,60 +63,61 @@ export default function FeatureSelectionLayer( return [ mask && MaskLayer(), - // @ts-ignore - new EditableCartoGeoJsonLayer({ - eventManager: customEventManager, - id: 'FeatureSelectionLayer', - // billboard need to be false to be compatible with Google Satellite - billboard: false, - pickable: !!selectedMode, - data: { - type: 'FeatureCollection', - features: spatialFilterGeometry ? [spatialFilterGeometry] : [] - }, - mode, - // @ts-ignore - selectedFeatureIndexes: isFinite(selectedFeatureIndex) - ? [selectedFeatureIndex] - : [], - onEdit: ({ updatedData, editType }) => { - // Once the geometry is drawed, disable the tool - if (editType === 'addFeature') { - dispatch(setFeatureSelectionEnabled(false)); - } + (selectedMode || spatialFilterGeometry) && + new EditableCartoGeoJsonLayer({ + eventManager: customEventManager, + id: 'FeatureSelectionLayer', + // billboard need to be false to be compatible with Google Satellite + billboard: false, + pickable: !!selectedMode, + data: { + type: 'FeatureCollection', + features: spatialFilterGeometry ? [spatialFilterGeometry] : [] + }, + dataComparator: (data, oldData) => data.features[0] === oldData.features[0], + mode, + // @ts-ignore + selectedFeatureIndexes: isFinite(selectedFeatureIndex) + ? [selectedFeatureIndex] + : [], + onEdit: ({ updatedData, editType }) => { + // Once the geometry is drawed, disable the tool + if (editType === 'addFeature') { + dispatch(setFeatureSelectionEnabled(false)); + } - // Do not update spatial filter if - // 1. updatedData is empty - // 2. editType includes tentative, that means it's being drawn - if (updatedData.features.length !== 0 && !editType.includes('Tentative')) { - const [lastFeature] = updatedData.features.slice(-1); - if (lastFeature) { - dispatch( - addSpatialFilter({ - geometry: lastFeature - }) - ); + // Do not update spatial filter if + // 1. updatedData is empty + // 2. editType includes tentative, that means it's being drawn + if (updatedData.features.length !== 0 && !editType.includes('Tentative')) { + const [lastFeature] = updatedData.features.slice(-1); + if (lastFeature) { + dispatch( + addSpatialFilter({ + geometry: lastFeature + }) + ); + } + } + }, + onClick: ({ index, object }) => { + if (isEdit && object?.geometry.type === 'Polygon') { + setSelectedFeatureIndex(index); } - } - }, - onClick: ({ index, object }) => { - if (isEdit && object?.geometry.type === 'Polygon') { - setSelectedFeatureIndex(index); - } - }, - // Styles once geometry is created or it's being edited - getLineColor: mainColor, - getFillColor: isEdit ? [...mainColor.slice(0, 3), 255 * 0.08] : [0, 0, 0, 0], - // Styles while drawing geometry - getTentativeFillColor: [...primaryAsRgba.slice(0, 3), 255 * 0.08], - getTentativeLineColor: primaryAsRgba, - // Point styles while drawing - getEditHandlePointColor: [0xff, 0xff, 0xff], - getEditHandlePointOutlineColor: primaryAsRgba, - editHandlePointStrokeWidth: 5, - getEditHandlePointRadius: 2, - getLineWidth: 4 - }) + }, + // Styles once geometry is created or it's being edited + getLineColor: mainColor, + getFillColor: isEdit ? [...mainColor.slice(0, 3), 255 * 0.08] : [0, 0, 0, 0], + // Styles while drawing geometry + getTentativeFillColor: [...primaryAsRgba.slice(0, 3), 255 * 0.08], + getTentativeLineColor: primaryAsRgba, + // Point styles while drawing + getEditHandlePointColor: [0xff, 0xff, 0xff], + getEditHandlePointOutlineColor: primaryAsRgba, + editHandlePointStrokeWidth: 5, + getEditHandlePointRadius: 2, + getLineWidth: 4 + }) ]; } From c1e7b1ff95442efca62c5e1c78ce594a87b26df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Tue, 29 Nov 2022 10:03:04 +0100 Subject: [PATCH 2/3] Update packages/react-widgets/src/layers/FeatureSelectionLayer.js --- packages/react-widgets/src/layers/FeatureSelectionLayer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-widgets/src/layers/FeatureSelectionLayer.js b/packages/react-widgets/src/layers/FeatureSelectionLayer.js index 87d3ba060..adce72ec0 100644 --- a/packages/react-widgets/src/layers/FeatureSelectionLayer.js +++ b/packages/react-widgets/src/layers/FeatureSelectionLayer.js @@ -74,6 +74,7 @@ export default function FeatureSelectionLayer( type: 'FeatureCollection', features: spatialFilterGeometry ? [spatialFilterGeometry] : [] }, + // has mask polygon changed? dataComparator: (data, oldData) => data.features[0] === oldData.features[0], mode, // @ts-ignore From 6a97d6367139cfb10fb3e67f45eda83e3bcf4426 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Tue, 29 Nov 2022 10:06:44 +0100 Subject: [PATCH 3/3] Add changelog entry --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa7f8f776..d0b8a2806 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Not released +- Improve rendering performance of FeatureSelectionLayer (mask layer) [#541](https://github.com/CartoDB/carto-react/pull/541) + ## 1.5 ## 1.5.0-alpha.8 (2022-11-25)