React-google-maps: changing controlled drawing mode completes current shape but doesn't call onXXXComplete handler

[AhmedSayed77]

I have this component (unrelated code was removed)

const MapView = withScriptjs(withGoogleMap(class extends React.PureComponent {
  state = {
    isDrawing: false,
  }

  onPolygonCompleted = polygon => {
    console.log('=== polygon ===', polygon);
    const coordinates = getPathsArraysFromPolygon(polygon);
    polygon.setMap(null);
  }

  onKeyDown = event => {
    if (event.keyCode === 27) { // escape button
      this.setState(() => ({
        isDrawing: false,
      }));
    }
  }

  componentDidMount () {
    window.addEventListener('keydown', this.onKeyDown);
  }

  componentWillUnmount () {
    window.removeEventListener('keydown', this.onKeyDown);
  }

  render () {
    const {
      isDrawing,
    } = this.state;

    return (
      <GoogleMap >
        <DrawingManager
          drawingMode={isDrawing ? window.google.maps.drawing.OverlayType.POLYGON : null}
          onPolygonComplete={this.onPolygonCompleted}
          onOverlayComplete={(...args) => console.log('=== onOverlayComplete ===', ...args)}
          onCircleComplete={(...args) => console.log('=== onCircleComplete ===', ...args)}
          onMarkerComplete={(...args) => console.log('=== onMarkerComplete ===', ...args)}
          onPolylineComplete={(...args) => console.log('=== onPolylineComplete ===', ...args)}
          onRectangleComplete={(...args) => console.log('=== onRectangleComplete ===', ...args)}
        />
        <div id="draw-controls">
          <Button
            icon={isDrawing ? 'close' : 'plus'}
            size="large"
            onClick={() => {
              window.component = this;
              this.setState(({isDrawing}) => ({
                isDrawing: !isDrawing,
              }));
            }}
          />
        </div>
      </GoogleMap>
    );
  }
}));

I use a custom button to toggle draw mode, and escape key to exit the drawing mode, but if I start drawing, then I press the escape key or the button, the points are connected to form a polygon, but none of the handlers is called - which means that I don't have a reference of the newly drawn polygon

[johnkueh]

Did you manage to solve this ?

[AhmedSayed77]

passing drawingControl: false to the drawing manager, and implementing my own button that switches the mode. here's the code (the mode is set in the state and passed as a prop to the drawing manager)

drawingManagerOptions = {
    drawingControl: false,
    drawingControlOptions: {
      position: window.google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [window.google.maps.drawing.OverlayType.POLYGON],
    },
    polygonOptions: this.editingPolygon,
  }

        <DrawingManager
          key={currentMode}
          options={this.drawingManagerOptions}
          drawingMode={currentMode === modes.draw
            ? window.google.maps.drawing.OverlayType.POLYGON
            : null}
          onPolygonComplete={this.onPolygonCompleted}
        />

          <Button
            disabled={isInEditMode}
            onClick={isInDrawMode ? this.switchToViewMode : this.switchToDrawMode}
          >
            {isInDrawMode ? 'Cancel' : 'Draw'}
          </Button>

[krvajal]

Can this issue be closed?

[johnantoni]

Reckon this can, I did something similar

[tyholby]

@AhmedSayed77 Can you tell me how you were able to get a reference to the newly completed polygon? I can't get it in the event listeners too when it auto completes it (when canceling the drawing mode)

[AhmedSayed77]

[@tyholby] [this is the code](https://github.com/tomchentw/react-google-maps/issues/796#issuecomment-388331687)

• the 'key' property is used to unmount and remount the component whenever the mode changes
• the 'drawingMode' property is used used to switch between drawing and not drawing
• 'onPolygonComplete' is the actual handler, it signature is polygon => void

[tyholby]

@AhmedSayed77 I had everything right except the key property! Thank you!

[truongqk1987]

Hi @tyholby @AhmedSayed77 , I tried to apply your example, but I can't trigger the method onPolygonComplete when I change drawingmode

[AhmedSayed77]

@truongqk1987 can you show me a code sample?