Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks
AndrewCasta opened this issue Apr 11, 2023 · 3 comments
Open
3 tasks

Comments

@AndrewCasta
Copy link

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

Nebula.create.drag.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
Copy link

perifer commented Aug 17, 2023

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
Copy link

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
Copy link
Collaborator

ibgreen commented Apr 30, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants