renderLayers()

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;
  }