Create & move point on LineString/Polygon incorrectly moves existing point

[AndrewCasta]

Describe the bug

When attempting to click & drag (to add a point & position it) in one mouse click, an existing point is dragged instead of creating a new one.

It appears that onEdit is being called for the 'movePosition' editType, with feature data that has not been updated yet from the initial 'addPosition' onEdit call, causing the movePosition edit to override the feature data with its outdated data.

Actual Result

An existing point is dragged.

Expected Result

The new point should be dragged.

Reproduce Steps

1. Select existing LineString
2. Click & drag to create point and move it

Screenshots

https://user-images.githubusercontent.com/69061229/231071474-d74f9c95-8a63-406b-a06a-cee5866fd8ad.mp4

To Do List

• [ ] Add label and assign to milestone
• [ ] Coding
• [ ] Test

---

@nebula.gl/edit-modes: 1.0.4 @nebula.gl/layers: 1.0.4 deck.gl: 8.9.4 React: 17.0.2

Simple component running at the root of React app

const initFeatures = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [-122.46212548792364, 37.79026033616934],
            [-122.48435831844807, 37.77160302698496],
            [-122.45884849905971, 37.74414218845571],
            [-122.42863676726826, 37.76266965836386],
            [-122.46212548792364, 37.79026033616934],
          ],
        ],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [-122.36212548792364, 37.79026033616934],
          [-122.38435831844807, 37.77160302698496],
          [-122.35884849905971, 37.74414218845571],
          [-122.32863676726826, 37.76266965836386],
        ],
      },
    },
  ],
}

const initialViewState = {
  longitude: -122.43,
  latitude: 37.775,
  zoom: 12,
}

import React from 'react'
import DeckGL from '@deck.gl/react'

export const HelloWorldNebula = () => {
  const [features, setFeatures] = useState(initFeatures)
  const [mode, setMode] = useState(() => ModifyMode)
  const [selectedFeatureIndexes, setSelectedFeatureIndexes] = useState([1])

  useEffect(() => {
    console.log('setFeatures')
  }, [features])

  const layer = new EditableGeoJsonLayer({
    // id: "geojson-layer",
    data: features,
    mode,
    selectedFeatureIndexes,

    onEdit: (info) => {
      console.log(info.editType)
      setFeatures(info.updatedData)
    },
  })
  return (
    <>
      <DeckGL
        initialViewState={initialViewState}
        controller={{
          doubleClickZoom: false,
        }}
        layers={[layer]}
        getCursor={layer.getCursor.bind(layer)}
        onClick={(info) => {
          if (mode === ViewMode)
            if (info) {
              setSelectedFeatureIndexes([info.index])
            } else {
              setSelectedFeatureIndexes([])
            }
        }}
      ></DeckGL>
    </>
  )
}

[perifer]

I can reproduce this. In my own app it happens frequently but not always. On https://nebula.gl/geojson-editor/ I can't get it to happen. When I run https://github.com/uber/nebula.gl/tree/master/examples/advanced locally I can quite easily reproduce it but only if I have the inspector in Chrome open at the same time (!).

I wonder if this has anything to do with how React optimises state updates...

[PedroFMBranco]

A little late on this but I've just come across with the same problem. It seeems to only happen when the browser's DevTools are open.

[ibgreen]

nebula.gl is no longer active. A fork has been started in the deck.gl-community repo, see discussions for links.