question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

changing controlled drawing mode completes current shape but doesn't call onXXXComplete handler

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:5
  • Comments:9

github_iconTop GitHub Comments

4reactions
AhmadMayocommented, May 11, 2018

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>
1reaction
AhmadMayocommented, Jan 29, 2019

[@tyholby] this is the code

  • 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
Read more comments on GitHub >

github_iconTop Results From Across the Web

Prevent or allow changes to shapes - Microsoft Support
Select Run in developer mode and then click OK. Prevent or allow changes to shape attributes. Select a shape in your drawing. On...
Read more >
CALayer Tutorial for iOS: Getting Started - RayWenderlich.com
Open it in Xcode, then build and run to see what you're starting with. The Layer Player app demonstrates nine different CALayer capabilities....
Read more >
Xcode 13 Release Notes | Apple Developer Documentation
To support the new Swift concurrency model, clang can now warn if you call a completion handler more than once or if an...
Read more >
c# - How can I make the cursor turn to the wait cursor?
You can use Cursor.Current . // Set cursor as hourglass Cursor.Current = Cursors.WaitCursor; // Execute your time-intensive hashing code ...
Read more >
View - Android Developers
Call isInTouchMode() to see whether the device is currently in touch mode. ... This view is invisible, and it doesn't take any space...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found