Skip to content

Commit

Permalink
Migrate React examples to functional components (visgl#4754)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pessimistress
Pessimistress authored Jul 7, 2020
1 parent 8caa1d3 commit 6f492d5
Show file tree
Hide file tree
Showing 64 changed files with 1,332 additions and 2,323 deletions.
28 changes: 12 additions & 16 deletions examples/experimental/bezier/src/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React from 'react';
import {render} from 'react-dom';
import DeckGL from '@deck.gl/react';
import {OrthographicView} from '@deck.gl/core';
Expand All @@ -11,21 +11,17 @@ const INITIAL_VIEW_STATE = {
zoom: 1
};

export default class App extends Component {
render() {
const {data = SAMPLE_GRAPH} = this.props;

return (
<DeckGL
width="100%"
height="100%"
initialViewState={INITIAL_VIEW_STATE}
controller={true}
views={new OrthographicView()}
layers={[new BezierGraphLayer({data})]}
/>
);
}
export default function App({data = SAMPLE_GRAPH}) {
return (
<DeckGL
width="100%"
height="100%"
initialViewState={INITIAL_VIEW_STATE}
controller={true}
views={new OrthographicView()}
layers={[new BezierGraphLayer({data})]}
/>
);
}

/* global document */
Expand Down
137 changes: 60 additions & 77 deletions examples/experimental/h3-grid/src/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {Component, Fragment} from 'react';
import React, {useState} from 'react';
import {render} from 'react-dom';
import DeckGL from '@deck.gl/react';
import {MapView} from '@deck.gl/core';
Expand All @@ -25,89 +25,72 @@ const MAP_VIEW = new MapView({repeat: true});
// hexagon per tile at minZoom
const MAX_HEX_COUNT = 1000;

export default class App extends Component {
constructor(props) {
super(props);

this.state = {
initialViewState: {
longitude: 0,
latitude: 0,
zoom: 2,
pitch: 0,
bearing: 0
},
resolution: 1
};

this._onResolutionChange = this._onResolutionChange.bind(this);
this._onViewStateChange = this._onViewStateChange.bind(this);
const INITIAL_VIEW_STATE = {
longitude: 0,
latitude: 0,
zoom: 2
};

this._viewState = this.state.initialViewState;
}
export default function App() {
const [initialViewState, setInitialViewState] = useState(INITIAL_VIEW_STATE);
const [resolution, setResolution] = useState(1);
const [currentViewState] = useState({...INITIAL_VIEW_STATE});

_onViewStateChange({viewState}) {
const onViewStateChange = ({viewState}) => {
// Just save a copy of the viewState, no need to trigger rerender
this._viewState = viewState;
}
Object.assign(currentViewState, viewState);
};

_onResolutionChange(evt) {
const resolution = Number(evt.target.value);
const minZoom = getMinZoom(resolution, MAX_HEX_COUNT);
const initialViewState = {
...this._viewState,
zoom: Math.max(this._viewState.zoom, minZoom),
minZoom
};
const onResolutionChange = evt => {
const newResolution = Number(evt.target.value);
const minZoom = getMinZoom(newResolution, MAX_HEX_COUNT);

this.setState({initialViewState, resolution});
}

render() {
const {resolution, initialViewState} = this.state;
const layer = new H3GridLayer({
// highPrecision: true,
resolution,
maxHexCount: MAX_HEX_COUNT,
filled: true,
extruded: false,
stroked: true,
lineWidthUnits: 'pixels',
getLineWidth: 2,
getFillColor: [0, 0, 0, 1],
pickable: true,
autoHighlight: true
setResolution(newResolution);
setInitialViewState({
...currentViewState,
zoom: Math.max(currentViewState.zoom, minZoom),
minZoom
});
};

const layer = new H3GridLayer({
resolution,
maxHexCount: MAX_HEX_COUNT,
filled: true,
extruded: false,
stroked: true,
lineWidthUnits: 'pixels',
getLineWidth: 2,
getFillColor: [0, 0, 0, 1],
pickable: true,
autoHighlight: true
});

return (
<Fragment>
<DeckGL
initialViewState={initialViewState}
controller={true}
views={MAP_VIEW}
layers={[layer]}
onViewStateChange={this._onViewStateChange}
getTooltip={info => info.object}
>
<StaticMap
mapStyle="mapbox://styles/mapbox/light-v9"
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
</DeckGL>
<div style={CONTROL_PANEL_STYLE}>
<div>Resolution: {resolution}</div>
<input
type="range"
min="0"
max="15"
step="1"
value={resolution}
onInput={this._onResolutionChange}
/>
</div>
</Fragment>
);
}
return (
<>
<DeckGL
initialViewState={initialViewState}
controller={true}
views={MAP_VIEW}
layers={[layer]}
onViewStateChange={onViewStateChange}
getTooltip={info => info.object}
>
<StaticMap mapStyle="mapbox://styles/mapbox/light-v9" mapboxApiAccessToken={MAPBOX_TOKEN} />
</DeckGL>
<div style={CONTROL_PANEL_STYLE}>
<div>Resolution: {resolution}</div>
<input
type="range"
min="0"
max="15"
step="1"
value={resolution}
onInput={onResolutionChange}
/>
</div>
</>
);
}

/* global document */
Expand Down
1 change: 0 additions & 1 deletion examples/get-started/pure-js/basic/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export const deck = new Deck({
filled: true,
lineWidthMinPixels: 2,
opacity: 0.4,
getLineDashArray: [3, 3],
getLineColor: [60, 60, 60],
getFillColor: [200, 200, 200]
}),
Expand Down
83 changes: 40 additions & 43 deletions examples/get-started/react/basic/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React from 'react';
import {render} from 'react-dom';
import DeckGL, {GeoJsonLayer, ArcLayer} from 'deck.gl';

Expand All @@ -16,53 +16,50 @@ const INITIAL_VIEW_STATE = {
pitch: 30
};

class Root extends Component {
_onClick(info) {
function Root() {
const onClick = info => {
if (info.object) {
// eslint-disable-next-line
alert(`${info.object.properties.name} (${info.object.properties.abbrev})`);
}
}
};

render() {
return (
<DeckGL controller={true} initialViewState={INITIAL_VIEW_STATE}>
<GeoJsonLayer
id="base-map"
data={COUNTRIES}
stroked={true}
filled={true}
lineWidthMinPixels={2}
opacity={0.4}
getLineDashArray={[3, 3]}
getLineColor={[60, 60, 60]}
getFillColor={[200, 200, 200]}
/>
<GeoJsonLayer
id="airports"
data={AIR_PORTS}
filled={true}
pointRadiusMinPixels={2}
pointRadiusScale={2000}
getRadius={f => 11 - f.properties.scalerank}
getFillColor={[200, 0, 80, 180]}
pickable={true}
autoHighlight={true}
onClick={this._onClick}
/>
<ArcLayer
id="arcs"
data={AIR_PORTS}
dataTransform={d => d.features.filter(f => f.properties.scalerank < 4)}
getSourcePosition={f => [-0.4531566, 51.4709959]}
getTargetPosition={f => f.geometry.coordinates}
getSourceColor={[0, 128, 200]}
getTargetColor={[200, 0, 80]}
getWidth={1}
/>
</DeckGL>
);
}
return (
<DeckGL controller={true} initialViewState={INITIAL_VIEW_STATE}>
<GeoJsonLayer
id="base-map"
data={COUNTRIES}
stroked={true}
filled={true}
lineWidthMinPixels={2}
opacity={0.4}
getLineColor={[60, 60, 60]}
getFillColor={[200, 200, 200]}
/>
<GeoJsonLayer
id="airports"
data={AIR_PORTS}
filled={true}
pointRadiusMinPixels={2}
pointRadiusScale={2000}
getRadius={f => 11 - f.properties.scalerank}
getFillColor={[200, 0, 80, 180]}
pickable={true}
autoHighlight={true}
onClick={onClick}
/>
<ArcLayer
id="arcs"
data={AIR_PORTS}
dataTransform={d => d.features.filter(f => f.properties.scalerank < 4)}
getSourcePosition={f => [-0.4531566, 51.4709959]}
getTargetPosition={f => f.geometry.coordinates}
getSourceColor={[0, 128, 200]}
getTargetColor={[200, 0, 80]}
getWidth={1}
/>
</DeckGL>
);
}

/* global document */
Expand Down
35 changes: 0 additions & 35 deletions examples/get-started/react/mapbox-browserify/README.md
View file

This file was deleted.

Loading

0 comments on commit 6f492d5

Please sign in to comment.