in modules/layers/src/layers/editable-h3-cluster-layer.ts [88:196]
renderLayers() {
const layers: any = [
new EditableGeoJsonLayer(
this.getSubLayerProps({
id: 'editable-geojson',
mode: this.props.mode,
data: EMPTY_FEATURE_COLLECTION,
selectedFeatureIndexes: [],
onEdit: (editAction) => {
const { editType, editContext } = editAction;
switch (editType) {
case 'updateTentativeFeature':
// tentative feature updates, updated on every pointer move
if (editContext.feature.geometry.type === 'Polygon') {
const coords = editContext.feature.geometry.coordinates;
const hexIDs = this.getDerivedHexagonIDs(coords);
this.setState({ tentativeHexagonIDs: hexIDs });
} else if (editContext.feature.geometry.type === 'Point') {
const coords = editContext.feature.geometry.coordinates;
const hexID = this.getDerivedHexagonID(coords);
this.setState({ tentativeHexagonIDs: [hexID] });
}
break;
case 'addFeature':
// @ts-expect-error accessing resolved data
const updatedData = [...this.props.data];
const { modeConfig } = this.props;
if (!modeConfig || !modeConfig.booleanOperation) {
// add new h3 cluster
updatedData.push(
this.props.getEditedCluster(this.state.tentativeHexagonIDs, null)
);
} else if (this.props.selectedIndexes.length !== 1) {
// eslint-disable-next-line no-console,no-undef
console.warn('booleanOperation only supported for single cluster selection');
} else {
// they're affecting a selected cluster
let finalHexagonIDs;
const committedHexagonIDs = new Set(this.getSelectedHexIDs());
const tentativeHexagonIDs = new Set(this.state.tentativeHexagonIDs);
switch (modeConfig.booleanOperation) {
case 'union':
default:
finalHexagonIDs = [
...new Set([...committedHexagonIDs, ...tentativeHexagonIDs]),
];
break;
case 'intersection':
finalHexagonIDs = [...committedHexagonIDs].filter((hexID: string) =>
tentativeHexagonIDs.has(hexID)
);
break;
case 'difference':
finalHexagonIDs = [...committedHexagonIDs].filter(
(hexID: string) => !tentativeHexagonIDs.has(hexID)
);
break;
}
const selectedIndex = this.props.selectedIndexes[0];
const existingCluster = this.props.data[selectedIndex];
updatedData[selectedIndex] = this.props.getEditedCluster(
finalHexagonIDs,
existingCluster
);
}
this.setState({
tentativeHexagonIDs: [],
});
this.props.onEdit({ updatedData });
break;
default:
break;
}
},
})
),
new H3ClusterLayer(
this.getSubLayerProps({
id: 'hexagons',
data: this.props.data,
getHexagons: this.props.getHexagons,
})
),
new H3ClusterLayer(
this.getSubLayerProps({
id: 'tentative-hexagons',
data: [
{
hexIds: this.state.tentativeHexagonIDs,
},
],
getHexagons: (d) => d.hexIds,
})
),
];
return layers;
}