Skip to content

Commit

Permalink
Merge 7252698 into bb0b09f
Browse files Browse the repository at this point in the history
  • Loading branch information
@supersonicclay
supersonicclay committed Sep 24, 2019
2 parents bb0b09f + 7252698 commit 0f9316b
Show file tree
Hide file tree
Showing 11 changed files with 348 additions and 1,195 deletions.
15 changes: 12 additions & 3 deletions CHANGELOG.md
View file
Expand Up @@ -7,18 +7,27 @@ _All notable changes to this project will be documented in this file. This proje
<!--
## Version TBD
### Breaking changes between `EditableGeoJsonLayer` and `EditableGeoJsonLayerEditModePoc`
### Breaking changes for `EditableGeoJsonLayer`
* `featureIndexes` is now nested under `editContext.featureIndexes` in parameter passed to `onEdit` callback
* Edit handle type is now under `properties.editHandleType` instead of `type` for edit handle styling accessors:
* getEditHandlePointColor
* getEditHandlePointRadius
* getEditHandleIcon
* getEditHandleIconSize
* getEditHandleIconColor
* getEditHandleIconAngle
* _Deprecated:_ The `mode` prop is intended to take a constructor or instance rather than a string.
* `import {DrawPolygonMode} from 'nebula.gl'; new EditableGeoJsonLayer({mode: DrawPolygonMode})`
* `editHandleType` no longer supports passing a function/constructor. Use `_subLayerProps` instead.
* `editHandleParameters` removed. Use `_subLayerProps` instead.
* `editHandleLayerProps` removed. Use `_subLayerProps` instead.
### Breaking changes between `ModeHandler` and `BaseGeoJsonEditMode`
### Breaking changes between `ModeHandler` and `GeoJsonEditMode`
If you built a custom `ModeHandler`, note the following breaking changes:
* Extend `BaseGeoJsonEditMode` instead of `ModeHandler`
* Extend `GeoJsonEditMode` instead of `ModeHandler`
* Each function now takes a `props` parameter with the state, so use `props` rather than `this.get...()` (e.g. `this.getFeatureCollection()`, `this.getModeConfig()`, etc).
* `handleClick`
* Call `props.onEdit` instead of returning an `EditAction`
Expand Down
44 changes: 14 additions & 30 deletions docs/api-reference/layers/editable-geojson-layer.md
View file
Expand Up @@ -4,7 +4,7 @@ The Editable GeoJSON layer accepts a [GeoJSON](http://geojson.org) `FeatureColle

```js
import DeckGL from 'deck.gl';
import { EditableGeoJsonLayer } from 'nebula.gl';
import { EditableGeoJsonLayer, DrawPolygonMode } from 'nebula.gl';

const myFeatureCollection = {
type: 'FeatureCollection',
Expand All @@ -13,19 +13,19 @@ const myFeatureCollection = {
]
};

const selectedFeatureIndexes = [];

class App extends React.Component {
state = {
mode: 'modify',
selectedFeatureIndexes: [0],
data: myFeatureCollection
};

render() {
const layer = new EditableGeoJsonLayer({
id: 'geojson-layer',
data: this.state.data,
mode: this.state.mode,
selectedFeatureIndexes: this.state.selectedFeatureIndexes,
mode: DrawPolygonMode,
selectedFeatureIndexes,

onEdit: ({ updatedData }) => {
this.setState({
Expand Down Expand Up @@ -59,43 +59,25 @@ A [GeoJSON](http://geojson.org) `FeatureCollection` object. The following types

_Note: passing a single `Feature` is not supported. However, you can pass a `FeatureCollection` containing a single `Feature` and pass `selectedFeatureIndexes: [0]` to achieve the same result._

#### `mode` (String, optional)
#### `mode` (Function|Object, optional)

* Default: `DrawPolygonMode`

* Default: `modify`
The `mode` property defines the mode used to handle user interaction events (e.g. pointer events) in order to accomplish edits. This can either be a constructor for an `EditMode` or an instance of `EditMode`.

The `mode` property dictates which `ModeHandler` from the `modeHandlers` prop will be used to handle user interaction events (e.g. pointer events) in order to accomplish edits. See [mode handlers overview](../mode-handlers/overview.md) for a description of the built-in modes.
There are a extensive number of modes that come out-of-the-box with nebula.gl. See [modes overview](../modes/overview.md).

#### `modeConfig` (Object, optional)

* Default: `null`

An arbitrary object used to further configure the current `ModeHandler`.
An arbitrary object used to further configure the current mode.

Snapping-related `modeConfig` properties:

* `enableSnapping` (Boolean, optional) - Enables snapping for modes that support snapping such as translate mode.
* `additionalSnapTargets` (Object[], optional) - An array of GeoJSON Features that can be snapped to. This property only needs to be specified if you want to snap to features in other deck.gl layers. All features in this `EditableGeoJsonLayer` will be snap targets.

#### `modeHandlers` (Object, optional)

* Default: see [mode handlers overview](../mode-handlers/overview.md)

A object containing a mapping of mode name (string) to an instance of a `ModeHandler`.

##### Example

For example, you can use this to provide your own custom `ModeHandler`:

```javascript
{
//...
modeHandlers: {
...EditableGeoJsonLayer.defaultProps.modeHandlers,
myCustomMode: new MyCustomModeHandler()
}
}
```

#### `selectedFeatureIndexes` (Array, optional)

* Default: `[]`
Expand All @@ -108,6 +90,8 @@ The `selectedFeatureIndexes` property distinguishes which features to treat as s

* Selected features in mode `modify` will render edit handles. Only one feature may be selected while in mode `drawLineString` or `drawPolygon` to draw a feature.

_Note: make sure to pass in the same array instance on each render if you are not changing selection. Otherwise, nebula.gl may clear state on every render (e.g. may clear a drawing in progress if the viewport changes)._

#### `onEdit` (Function, optional)

The `onEdit` event is the core event provided by this layer and must be handled in order to accept and render edits. The `event` argument includes the following properties:
Expand Down Expand Up @@ -154,7 +138,7 @@ The `onEdit` event is the core event provided by this layer and must be handled

* `featureIndexes` (Array&lt;number&gt;): The indexes of the edited/added features.

* `editContext` (Object): `null` or an object containing additional context about the edit. This is populated by the active mode handler, see [mode handlers overview](../mode-handlers/overview.md).
* `editContext` (Object): `null` or an object containing additional context about the edit. This is populated by the active mode, see [modes overview](../modes/overview.md).

##### Example

Expand Down
104 changes: 29 additions & 75 deletions docs/api-reference/mode-handlers/overview.md → docs/api-reference/modes/overview.md
View file
@@ -1,18 +1,14 @@
# Mode Handlers
# nebula.gl Editing Modes

`ModeHandler`s provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.
`EditMode`s provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.

The following are the built-in, and default `ModeHandler`s provided by nebula.gl:
The following are the built-in `EditMode`s provided by nebula.gl:

## [ViewHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/view-handler.js)

* Mode name: `view`
## [ViewMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/view-mode.js)

No edits are possible, but selection is still possible.

## [ModifyHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/modify-handler.js)

* Mode name: `modify`
## [ModifyMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/modify-mode.js)

User can move existing points, add intermediate points along lines, and remove points.

Expand All @@ -24,47 +20,33 @@ User can move existing points, add intermediate points along lines, and remove p

* `position` (Array): An array containing the ground coordinates (i.e. [lng, lat]) of the edited position

## [ExtrudeHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/extrude-handler.js)

* Mode name: `extrude`
## [ExtrudeMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/extrude-mode.js)

User can move edge. Click and drag from anywhere between 2 points in edge.

## [ScaleHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/scale-handler.js)

* Mode name: `scale`
## [ScaleMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/scale-mode.js)

User can scale a feature about its centroid by clicking and dragging (inward or outward) the selected geometry. This mode supports multiple selections.

## [RotateHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/rotate-handler.js)

* Mode name: `rotate`
## [RotateMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/rotate-mode.js)

User can rotate a feature about its centroid by clicking and dragging the selected geometry. This mode supports multiple selections.

## [TranslateHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/translate-handler.js)

* Mode name: `translate`
## [TranslateMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/translate-mode.js)

The user can move a feature by selecting one or more features and dragging anywhere within the screen.
_Additionally, the user can initiate snapping by clicking and dragging the selected feature's vertex handles. If the vertex handle is close enough to another feature's vertex, the two features will snap together._

## [DuplicateHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/duplicate-handler.js)

* Mode name: `duplicate`
## [DuplicateMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/duplicate-mode.js)

User can duplicate and translate a feature by clicking selected feature and dragging anywhere on the screen.
This mode is extends TranslateHandler. This mode supports multiple selections.

## [DrawPointHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-point-handler.js)
This mode is extends TranslateMode. This mode supports multiple selections.

* Mode name: `drawPoint`
## [DrawPointMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-point-mode.js)

User can draw a new `Point` feature by clicking where the point is to be.

## [DrawLineStringHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-line-string-handler.js)

* Mode name: `drawLineString`
## [DrawLineStringMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-line-string-mode.js)

User can draw a new `LineString` feature by clicking positions to add.

Expand All @@ -89,9 +71,7 @@ The following options can be provided in the `modeConfig` object:

* `position` (Array): An array containing the ground coordinates (i.e. [lng, lat]) of the added position

## [DrawPolygonHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-polygon-handler.js)

* Mode name: `drawPolygon`
## [DrawPolygonMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-polygon-mode.js)

User can draw a new `Polygon` feature by clicking positions to add then closing the polygon (or double-clicking).

Expand All @@ -103,27 +83,19 @@ User can draw a new `Polygon` feature by clicking positions to add then closing

* `position` (Array): An array containing the ground coordinates (i.e. [lng, lat]) of the added position

## [Draw90DegreePolygonHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-90degree-polygon-handler.js)

* Mode name: `draw90DegreePolygon`
## [Draw90DegreePolygonMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-90degree-polygon-mode.js)

User can draw a new `Polygon` feature with 90 degree corners (right angle) by clicking positions to add then closing the polygon (or double-clicking). After clicking the 2 points, the draw mode guides/allows to have right angle polygon.

## [DrawRectangleHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-rectangle-handler.js)

* Mode name: `drawRectangle`
## [DrawRectangleMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-mode.js)

User can draw a new rectangular `Polygon` feature by clicking two opposing corners of the rectangle.

## [DrawRectangleUsingThreePointsHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-rectangle-using-three-points-handler.js)

* Mode name: `drawRectangleUsing3Points`
## [DrawRectangleUsingThreePointsMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-using-three-points-mode.js)

User can draw a new rectangular `Polygon` feature by clicking three corners of the rectangle.

## [DrawCircleFromCenterHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-circle-from-center-handler.js)

* Mode name: `drawCircleFromCenter`
## [DrawCircleFromCenterMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-from-center-mode.js)

User can draw a new circular `Polygon` feature by clicking the center then along the ring.

Expand All @@ -134,9 +106,7 @@ The following options can be provided in the `modeConfig` object:
* `steps` (optional): `x <number>`
* If steps: `x` means the circle will be drawn using `x` number of points.

## [DrawCircleByBoundingBoxHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-circle-by-bounding-box-handler.js)

* Mode name: `drawCircleByBoundingBox`
## [DrawCircleByBoundingBoxMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-by-bounding-box-mode.js)

User can draw a new circular `Polygon` feature by clicking the two corners of bounding box.

Expand All @@ -147,31 +117,23 @@ The following options can be provided in the `modeConfig` object:
* `steps` (optional): `x <number>`
* If steps: `x` means the circle will be drawn using `x` number of points.

## [DrawEllipseByBoundingBoxHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-ellipse-by-bounding-box-handler.js)

* Mode name: `drawEllipseByBoundingBox`
## [DrawEllipseByBoundingBoxMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-by-bounding-box-mode.js)

User can draw a new ellipse shape `Polygon` feature by clicking two corners of bounding box.

## [DrawEllipseUsingThreePointsHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/draw-ellipse-using-three-points-handler.js)

* Mode name: `drawEllipseUsing3Points`
## [DrawEllipseUsingThreePointsMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-using-three-points-mode.js)

User can draw a new ellipse shape `Polygon` feature by clicking center and two corners of the ellipse.

## [SplitPolygonHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/split-polygon-handler.js)

* Mode name: `split`
## [SplitPolygonMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/split-polygon-mode.js)

User can split a polygon by drawing a new `LineString` feature on top of the polygon.

* If the first and the last click is outside the polygon, it will split the polygon

* If the clicked position is inside the polygon, it will not split the polygon

## [ElevationHandler](https://github.com/uber/nebula.gl/blob/master/modules/layers/src/mode-handlers/elevation-handler.js)

* Mode name: `elevation`
## [ElevationMode](https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/elevation-mode.js)

User can move a point up and down.

Expand All @@ -195,7 +157,7 @@ The following options can be provided in the `modeConfig` object:
```javascript
if (mode === 'elevation') {
modeConfig.calculateElevationChange = (opts) =>
ElevationHandler.calculateElevationChangeWithViewport(viewport, opts);
ElevationMode.calculateElevationChangeWithViewport(viewport, opts);
}
```

Expand All @@ -210,28 +172,20 @@ For all polygon drawing modes, the following options can be provided in the `mod
* If `difference`, the drawn `Polygon` is subtracted from the selected geometry
* If `intersection`, the drawn `Polygon` is intersected with the selected geometry

## Composite Mode Handler
## Composite Mode

Use `CompositeModeHandler` to combine multiple handlers.
Use `CompositeMode` to combine multiple modes.
_Not all combinations are guaranteed to work._

### Constructor

`new CompositeModeHandler(handlers, options = {})`
`new CompositeMode(modes, options = {})`

* `handlers`: `Array<ModeHandler>` Handlers you want to combine. **Order is very important.**
* `modes`: `Array<EditMode>` Modes you want to combine. **Order is very important.**
* `options` (optional): Options to be added later.

### Example

```
const modeHandlers = Object.assign(
{
'drawLineString+modify': new CompositeModeHandler([
new DrawLineStringHandler(),
new ModifyHandler()
])
},
EditableGeoJsonLayer.defaultProps.modeHandlers
);
new CompositeMode([new DrawLineStringMode(), new ModifyMode()])
```

0 comments on commit 0f9316b

Please sign in to comment.