Skip to content

Commit

Permalink
feat(react): New react module (#50)
Browse files Browse the repository at this point in the history
  • Loading branch information
ibgreen authored Apr 12, 2024
1 parent 5deffbe commit 4878c85
Show file tree
Hide file tree
Showing 47 changed files with 167 additions and 299 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

Create a generic `EditMode` interface that will serve as the core interface for handling user interaction and manipulating data. It will not be dependent on deck.gl, react-map-gl, or GeoJSON. This generic class will then be integrated into `EditableGeoJsonLayer` as well as the [upcoming DrawControl feature for react-map-gl](https://github.com/uber/react-map-gl/issues/734)

We will also refactor all the existing `ModeHandler` implementations of nebula to implement this interface instead so that they can be used seamlessly between `nebula.gl` and `react-map-gl-draw`.
We will also refactor all the existing `ModeHandler` implementations of nebula to implement this interface instead so that they can be used seamlessly between `@deck.gl-community/editable-layers` and `react-map-gl-draw`.

## Motivation

Expand All @@ -18,7 +18,7 @@ There are two limitations with nebula's `ModeHandler` interface.

## API

The `EditMode` interface serves as the core abstraction to editing using nebula.gl. It uses a reactive style approach using callbacks to notify of changes to state and reacting to state changes by receiving a `props` parameter in its functions.
The `EditMode` interface serves as the core abstraction to editing using @deck.gl-community/editable-layers. It uses a reactive style approach using callbacks to notify of changes to state and reacting to state changes by receiving a `props` parameter in its functions.

```javascript
export type ModeProps<TData> = {
Expand Down Expand Up @@ -115,21 +115,21 @@ class EditableGeoJsonLayer {

### Module layout

We will need a `@nebula.gl/edit-modes` module separate from the `nebula.gl` module. The reason is because this new `@nebula/edit-modes` should have no deck.gl dependency.
We will need a `@deck.gl-community/editable-layers` module separate from the `@deck.gl-community/editable-layers` module. The reason is because this new `@nebula/edit-modes` should have no deck.gl dependency.

- `nebula.gl`
- depends on `@nebula.gl/edit-modes`, `@nebula.gl/layers`, and all the other `@nebula/...` modules.
- `@deck.gl-community/editable-layers`
- depends on `@deck.gl-community/editable-layers`
- doesn't have much in it, just basically imports from the others and re-exports them
- `@nebula.gl/edit-modes`
- `@deck.gl-community/editable-layers`
- depends [turf.js](http://turfjs.org/), no (large) dependencies like deck.gl
- contains all the modes for editing GeoJSON (e.g. `DrawPolygonMode`)
- contains `EditMode` interface
- contains other general purpose types and classes (e.g. event types like `ClickEvent`)
- this module will be reused by `react-map-gl-draw`
- `@nebula.gl/layers`
- depends on `@nebula.gl/edit-modes` and `deck.gl`
- `@@deck.gl-community/editable-layers/layers`
- depends on `@@deck.gl-community/editable-layers/edit-modes` and `deck.gl`
- contains `EditableGeoJsonLayer`, a deck.gl `CompositeLayer`
- Other modules are unaffected (e.g. `@nebula.gl/overlays`)
- Other modules are unaffected (e.g. `@@deck.gl-community/editable-layers/overlays`)

### Breaking changes

Expand Down Expand Up @@ -249,9 +249,9 @@ class DrawPointsMode implements EditMode {
// event.mapCoords is the coordinates on the map (lat/long) that the user clicked
const updatedData = [...props.data, event.mapCoords];

// props.onEdit is the edit callback sent to the application using nebula.gl
// props.onEdit is the edit callback sent to the application using @deck.gl-community/editable-layers
// updatedData is the immutably-updated data
// nebula.gl will subsequently call updateState with the updated data
// @deck.gl-community/editable-layers will subsequently call updateState with the updated data
props.onEdit({ updatedData, editType: 'ADD_POINT' });
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
References:

- [Tentative Feature RFC](./tentative-feature.md): Tentative feature functionality must be implemented first
- [Background conversation](https://github.com/uber/nebula.gl/pull/49#issuecomment-413948690)
- [Background conversation](https://github.com/uber/@deck.gl-community/editable-layers/pull/49#issuecomment-413948690)

## Summary

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
[react-map-gl](https://visgl.github.io/react-map-gl/) currently does not support drawing functions. However, we have got a couple of [users](https://github.com/uber/react-map-gl/issues/725) interested in this capability. Also it is one of P0 features on Kepler.gl 2019 [roadmap](https://github.com/uber/kepler.gl/wiki/Kepler.gl-2019-Roadmap#allow-drawing-on-map-to-create-paths-and-polygons--).

Although [Mapbox/mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw) provides drawing and editing features, because of its manipulating internal states, it cannot work well with React / Redux framework and therefore cannot be integrated with `react-map-gl`.
Another `vis.gl` framework [Nebula.gl](http://nebula.gl) also provides geo editing functionality, but it heavily depends on [`deck.gl`](https://deck.gl/), which may not be suitable for non `deck.gl` use cases.
Another `vis.gl` framework `@deck.gl-community/editable-layers` also provides geo editing functionality, but it heavily depends on [`deck.gl`](https://deck.gl/), which may not be suitable for non `deck.gl` use cases.

## Proposal

Expand Down Expand Up @@ -82,7 +82,7 @@ Returns is a map of [style objects](https://reactjs.org/docs/dom-elements.html#s

### Styling based on `state`:

![img](https://raw.githubusercontent.com/uber-common/deck.gl-data/master/nebula.gl/edit-handle.png)
![img](https://raw.githubusercontent.com/uber-common/deck.gl-data/master/@nebula.gl/edit-handle.png)

As shown in the above image, for the feature currently being edited,

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

References:

- [Background conversation](https://github.com/uber/nebula.gl/pull/49#issuecomment-413948690)
- [Background conversation](https://github.com/uber/@deck.gl-community/editable-layers/pull/49#issuecomment-413948690)

## Summary

Expand All @@ -30,9 +30,9 @@ Store and update `tentativeFeature` state internally in `EditableGeoJsonLayer` s

### Upgrading/Downgrading Geometry Types

nebula.gl will no longer change a feature's geometry type.
@deck.gl-community/editable-layers will no longer change a feature's geometry type.

For example, adding points in `drawPolygon` mode would update the `tentativeFeature` until a polygon was complete, at which point a `Polygon` feature would be added to `data` (through the `onEdit` callback). Conversely, a user could remove positions from a `Polygon` until it was a triangle, at which point nebula.gl would no longer allow removing positions.
For example, adding points in `drawPolygon` mode would update the `tentativeFeature` until a polygon was complete, at which point a `Polygon` feature would be added to `data` (through the `onEdit` callback). Conversely, a user could remove positions from a `Polygon` until it was a triangle, at which point @deck.gl-community/editable-layers would no longer allow removing positions.

## Examples

Expand Down
14 changes: 7 additions & 7 deletions docs/modules/editable-layers/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Overview

[nebula.gl](https://nebula.gl) provides editable and interactive map overlay layers, built using the power of [deck.gl](https://deck.gl/).
Provides editable and interactive map overlay layers, built using the power of [deck.gl](https://deck.gl/).

## Design Goals

nebula.gl aspires to be an ultra-performant, fully 3D-enabled GeoJSON editing system primarily focused on geospatial editing use cases.
@deck.gl-community/editable-layers aspires to be an ultra-performant, fully 3D-enabled GeoJSON editing system primarily focused on geospatial editing use cases.

- Maximal rendering and editing performance, without need for complex application logic (such as splitting data into subgroups etc).
- Target performance: Editing at 60fps (e.g. dragging sub objects) in GeoJSON payloads with 100K features (points, lines or polygons).
Expand All @@ -13,9 +13,9 @@ nebula.gl aspires to be an ultra-performant, fully 3D-enabled GeoJSON editing sy
- Seamless integration with deck.gl and all geospatial deck.gl layers, allowing for GeoJSON editing to be interleaved with rich 3D visualizations.
- Handle all aspects of event handling, including touch screen support.

## Why nebula.gl?
## Why use `editable-layers`?

You should strongly consider nebula.gl:
You should strongly consider `editable-layers` if:

- You want a full-featured, ultra-high-performance editing solution for GeoJson.
- You are already using e.g. `deck.gl` or `react-map-gl`.
Expand All @@ -25,11 +25,11 @@ You may want to look at alternatives if:
- If you have very simple editing requirements (just a simple polygon etc)
- If you don't want to use `deck.gl` in your project.

If nebula.gl is more than what you need (e.g. in terms of bundle size), and you may want to look at other solutions, e.g. the simple polygon editor overlay being developed in react-map-gl.
If `editable-layers` is more than what you need (e.g. in terms of bundle size), and you may want to look at other solutions, e.g. the simple polygon editor overlay being developed in react-map-gl.

That said, if you are already using `deck.gl` the additional overhead of nebula.gl is small, and the seamless integration with deck.gl should be valuable.
That said, if you are already using `deck.gl` the additional overhead of `editable-layers` is small, and the seamless integration with deck.gl should be valuable.

## Quick Overview of the nebula.gl API
## Quick Overview of the API

### EditableGeoJsonLayer

Expand Down
Loading

0 comments on commit 4878c85

Please sign in to comment.