Skip to content
Permalink
Browse files

Upgrade dev tools to ocular (#780)

  • Loading branch information...
xintongxia committed May 8, 2019
1 parent f2bc61b commit 1da1398c063ffc3b8464744bde6781cb5dc3866e
Showing with 6,055 additions and 6,203 deletions.
  1. +0 −58 .babelrc
  2. +0 −21 .eslintrc
  3. +31 −0 .eslintrc.js
  4. +1 −0 .gitignore
  5. +5 −0 .prettierrc
  6. +5 −3 aliases.js
  7. +11 −0 babel.config.js
  8. +6 −0 examples/.eslintrc
  9. +21 −19 examples/additional-overlays/src/app.js
  10. +8 −7 examples/additional-overlays/src/choropleth-overlay.js
  11. +13 −9 examples/additional-overlays/src/scatterplot-overlay.js
  12. +19 −22 examples/additional-overlays/webpack.config.js
  13. +21 −24 examples/controls/src/app.js
  14. +5 −3 examples/controls/src/city-info.js
  15. +6 −4 examples/controls/src/city-pin.js
  16. +16 −3 examples/controls/src/control-panel.js
  17. +19 −22 examples/controls/webpack.config.js
  18. +6 −10 examples/custom-controller/src/app.js
  19. +10 −4 examples/custom-controller/src/control-panel.js
  20. +0 −1 examples/custom-controller/src/map-controller.js
  21. +19 −22 examples/custom-controller/webpack.config.js
  22. +8 −9 examples/custom-cursor/src/app.js
  23. +14 −7 examples/custom-cursor/src/control-panel.js
  24. +19 −22 examples/custom-cursor/webpack.config.js
  25. +23 −19 examples/deckgl-overlay/src/app.js
  26. +50 −35 examples/deckgl-overlay/view.js
  27. +19 −22 examples/deckgl-overlay/webpack.config.js
  28. +15 −16 examples/draggable-markers/src/app.js
  29. +3 −6 examples/draggable-markers/src/control-panel.js
  30. +2 −7 examples/draggable-markers/src/pin.js
  31. +19 −22 examples/draggable-markers/webpack.config.js
  32. +5 −7 examples/exhibit-browserify/app.js
  33. +3 −5 examples/exhibit-webpack/app.js
  34. +16 −15 examples/exhibit-webpack/webpack.config.js
  35. +4 −7 examples/filter/src/app.js
  36. +7 −4 examples/filter/src/control-panel.js
  37. +5 −3 examples/filter/src/map-style.js
  38. +19 −22 examples/filter/webpack.config.js
  39. +5 −7 examples/geojson-animation/src/app.js
  40. +5 −3 examples/geojson-animation/src/control-panel.js
  41. +1 −4 examples/geojson-animation/src/utils.js
  42. +19 −22 examples/geojson-animation/webpack.config.js
  43. +21 −19 examples/geojson/src/app.js
  44. +23 −9 examples/geojson/src/control-panel.js
  45. +3 −1 examples/geojson/src/utils.js
  46. +20 −26 examples/geojson/webpack.config.js
  47. +75 −84 examples/heatmap/src/app.js
  48. +24 −12 examples/heatmap/src/control-panel.js
  49. +20 −26 examples/heatmap/webpack.config.js
  50. +23 −16 examples/interaction/src/app.js
  51. +45 −21 examples/interaction/src/control-panel.js
  52. +19 −22 examples/interaction/webpack.config.js
  53. +6 −8 examples/layers/src/app.js
  54. +33 −22 examples/layers/src/control-panel.js
  55. +19 −22 examples/layers/webpack.config.js
  56. +3 −4 examples/locate-user/src/app.js
  57. +19 −22 examples/locate-user/webpack.config.js
  58. +3 −6 examples/main/app.js
  59. +7 −8 examples/main/example-container.js
  60. +3 −10 examples/main/table-of-contents.js
  61. +2 −2 examples/main/views/click.js
  62. +32 −30 examples/main/views/custom-overlay.js
  63. +6 −9 examples/main/views/marker.js
  64. +1 −2 examples/main/views/not-interactive.js
  65. +16 −19 examples/main/views/route-overlay.js
  66. +19 −15 examples/main/views/style-diffing.js
  67. +22 −25 examples/main/webpack.config.js
  68. +6 −8 examples/reuse-map/src/app.js
  69. +6 −8 examples/reuse-map/src/bart-map.js
  70. +19 −22 examples/reuse-map/webpack.config.js
  71. +12 −12 examples/viewport-animation/src/app.js
  72. +15 −8 examples/viewport-animation/src/control-panel.js
  73. +19 −22 examples/viewport-animation/webpack.config.js
  74. +21 −21 examples/webpack.config.local.js
  75. +22 −26 examples/zoom-to-bounds/src/app.js
  76. +6 −1 examples/zoom-to-bounds/src/control-panel.js
  77. +20 −17 examples/zoom-to-bounds/src/map-style.js
  78. +20 −26 examples/zoom-to-bounds/webpack.config.js
  79. +20 −0 ocular-dev-tools.config.js
  80. +42 −34 package.json
  81. +0 −8 scripts/build.sh
  82. +0 −56 scripts/collect-metrics.sh
  83. +31 −0 src/.eslintrc.js
  84. +8 −13 src/components/base-control.js
  85. +13 −12 src/components/draggable-control.js
  86. +14 −9 src/components/fullscreen-control.js
  87. +28 −33 src/components/geolocate-control.js
  88. +108 −91 src/components/interactive-map.js
  89. +0 −2 src/components/marker.js
  90. +16 −13 src/components/navigation-control.js
  91. +49 −35 src/components/popup.js
  92. +80 −70 src/components/static-map.js
  93. +1 −1 src/index.js
  94. +49 −51 src/mapbox/mapbox.js
  95. +16 −16 src/overlays/canvas-overlay.js
  96. +20 −17 src/overlays/html-overlay.js
  97. +18 −15 src/overlays/svg-overlay.js
  98. +1 −1 src/utils/assert.js
  99. +3 −3 src/utils/deprecate-warn.js
  100. +15 −9 src/utils/dynamic-position.js
  101. +0 −1 src/utils/geolocate-utils.js
  102. +1 −2 src/utils/map-constraints.js
  103. +95 −82 src/utils/map-controller.js
  104. +38 −25 src/utils/map-state.js
  105. +6 −4 src/utils/style-utils.js
  106. +11 −15 src/utils/transition-manager.js
  107. +14 −13 src/utils/transition/linear-interpolator.js
  108. +5 −4 src/utils/transition/transition-interpolator.js
  109. +2 −2 src/utils/transition/transition-utils.js
  110. +1 −3 src/utils/transition/viewport-fly-to-interpolator.js
  111. +6 −0 test/.eslintrc
  112. +24 −0 test/browser.js
  113. +3 −4 test/src/components/map.spec.js
  114. +3 −5 test/src/components/marker.spec.js
  115. +4 −2 test/src/index.js
  116. +42 −43 test/src/utils/dynamic-position.spec.js
  117. +5 −2 test/src/utils/map-constraints.spec.js
  118. +67 −44 test/src/utils/map-state.spec.js
  119. +172 −71 test/src/utils/transition-manager.spec.js
  120. +37 −17 test/src/utils/transition/linear-interpolator.spec.js
  121. +11 −6 test/src/utils/transition/transition-interpolator.spec.js
  122. +114 −18 test/src/utils/transition/viewport-fly-to-interpolator.spec.js
  123. +17 −17 test/start.js
  124. +0 −3 test/test-browser.js
  125. +1 −1 test/test-utils.js
  126. +0 −171 test/webpack.config.js
  127. +24 −0 webpack.config.js
  128. +3,707 −4,052 yarn.lock

This file was deleted.

This file was deleted.

@@ -0,0 +1,31 @@
// prettier-ignore
module.exports = {
parser: 'babel-eslint',
plugins: ['flowtype', 'react'],
extends: ['uber-jsx', 'uber-es2015', 'prettier', 'prettier/react', 'prettier/flowtype', 'plugin:import/errors', 'plugin:flowtype/recommended'],
overrides: {
files: ['*.spec.js', 'webpack.config.js', '**/bundle/*.js'],
rules: {
'import/no-extraneous-dependencies': 0
}
},
settings: {
'import/core-modules': [
'math.gl',
'viewport-mercator-project'
]
},
rules: {
'guard-for-in': 0,
'no-inline-comments': 0,
'no-invalid-this': 0,
camelcase: 0,
'react/forbid-prop-types': 0,
'react/no-deprecated': 0,
'import/no-unresolved': ['error', {ignore: ['test']}],
'import/no-extraneous-dependencies': ['error', {devDependencies: false, peerDependencies: true}]
},
parserOptions: {
ecmaVersion: 2018
}
};
@@ -10,5 +10,6 @@ package-lock.json
*/**/package-lock.json
yarn-error.log
.DS_Store
.reify-cache

.idea
@@ -0,0 +1,5 @@
printWidth: 100
semi: true
singleQuote: true
trailingComma: none
bracketSpacing: false
@@ -19,11 +19,13 @@
// THE SOFTWARE.

// Registers an alias for this module
const path = require('path');
const {resolve} = require('path');

const ALIASES = {
'react-map-gl/test': path.resolve('./test'),
'react-map-gl': path.resolve('./src')
'react-map-gl/test': resolve('./test'),
'react-map-gl': resolve('./src'),
'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js'),
webworkify: 'webworkify-webpack-dropin'
};

if (module.require) {
@@ -0,0 +1,11 @@
/* eslint-disable import/no-extraneous-dependencies */
const getBabelConfig = require('ocular-dev-tools/config/babel.config');

module.exports = api => {
const config = getBabelConfig(api);

config.presets.push('@babel/flow');
config.plugins.push('@babel/proposal-class-properties');

return config;
};
@@ -0,0 +1,6 @@
{
"rules": {
"import/no-unresolved": 0,
"import/no-extraneous-dependencies": 0
}
}
@@ -32,13 +32,12 @@ import CITIES from '../../data/cities.json';

const MAPBOX_TOKEN = ''; // Set your mapbox token here

const ZIPCODES = Immutable.fromJS(ZIPCODES_SF.features)
.map(f => f.setIn(['properties', 'value'], Math.random() * 1000));

const CITY_LOCATIONS = Immutable.fromJS(
CITIES.map(c => [c.longitude, c.latitude])
const ZIPCODES = Immutable.fromJS(ZIPCODES_SF.features).map(f =>
f.setIn(['properties', 'value'], Math.random() * 1000)
);

const CITY_LOCATIONS = Immutable.fromJS(CITIES.map(c => [c.longitude, c.latitude]));

export default class App extends Component {
constructor(props) {
super(props);
@@ -56,33 +55,36 @@ export default class App extends Component {
}

render() {
const {viewport, draggablePoints} = this.state;
const {viewport} = this.state;

return (
<MapGL
{...viewport}
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={v => this.setState({viewport: v})}
mapboxApiAccessToken={MAPBOX_TOKEN} >

<ChoroplethOverlay key="choropleth"
globalOpacity={ 0.8 }
colorDomain={ [0, 500, 1000] }
colorRange={ ['#31a354', '#addd8e', '#f7fcb9'] }
renderWhileDragging={ false }
features={ ZIPCODES } />

<ScatterplotOverlay key="scatterplot"
mapboxApiAccessToken={MAPBOX_TOKEN}
>
<ChoroplethOverlay
key="choropleth"
globalOpacity={0.8}
colorDomain={[0, 500, 1000]}
colorRange={['#31a354', '#addd8e', '#f7fcb9']}
renderWhileDragging={false}
features={ZIPCODES}
/>

<ScatterplotOverlay
key="scatterplot"
locations={CITY_LOCATIONS}
dotRadius={10}
globalOpacity={0.8}
compositeOperation="lighter"
dotFill="#00a8fe"
renderWhileDragging={true} />

renderWhileDragging={true}
/>
</MapGL>
);
}
}

ReactDOM.render(<App/>, document.body.appendChild(document.createElement('div')));
ReactDOM.render(<App />, document.body.appendChild(document.createElement('div')));
@@ -30,8 +30,8 @@ const propTypes = {
renderWhileDragging: PropTypes.bool.isRequired,
globalOpacity: PropTypes.number.isRequired,
/**
* An Immutable List of feature objects.
*/
* An Immutable List of feature objects.
*/
features: PropTypes.instanceOf(Immutable.List),
/* eslint-disable react/forbid-prop-types */
colorDomain: PropTypes.array,
@@ -48,7 +48,6 @@ const defaultProps = {
};

export default class ChoroplethOverlay extends PureComponent {

_redraw = ({width, height, ctx, isDragging, project, unproject}) => {
ctx.clearRect(0, 0, width, height);

@@ -61,18 +60,20 @@ export default class ChoroplethOverlay extends PureComponent {

if (this.props.renderWhileDragging || !isDragging) {
const transform = geoTransform({point: projectPoint});
const path = geoPath().projection(transform).context(ctx);
const path = geoPath()
.projection(transform)
.context(ctx);
this._drawFeatures(ctx, path);
}
}
};

_drawFeatures(ctx, path) {
const {features} = this.props;
if (!features) {
return;
}
const colorDomain = this.props.colorDomain ||
extent(features.toArray(), this.props.valueAccessor);
const colorDomain =
this.props.colorDomain || extent(features.toArray(), this.props.valueAccessor);

const colorScale = scaleLinear()
.domain(colorDomain)
@@ -17,7 +17,7 @@
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import React, {PureComponent, createElement} from 'react';
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';

import Immutable from 'immutable';
@@ -49,12 +49,15 @@ const defaultProps = {
};

export default class ScatterplotOverlay extends PureComponent {

/* eslint-disable max-statements */
_redraw = ({width, height, ctx, isDragging, project, unproject}) => {
const {
dotRadius, dotFill, compositeOperation,
renderWhileDragging, locations, lngLatAccessor
dotRadius,
dotFill,
compositeOperation,
renderWhileDragging,
locations,
lngLatAccessor
} = this.props;

ctx.clearRect(0, 0, width, height);
@@ -64,10 +67,11 @@ export default class ScatterplotOverlay extends PureComponent {
for (const location of locations) {
const pixel = project(lngLatAccessor(location));
const pixelRounded = [round(pixel[0], 1), round(pixel[1], 1)];
if (pixelRounded[0] + dotRadius >= 0 &&
pixelRounded[0] - dotRadius < width &&
pixelRounded[1] + dotRadius >= 0 &&
pixelRounded[1] - dotRadius < height
if (
pixelRounded[0] + dotRadius >= 0 &&
pixelRounded[0] - dotRadius < width &&
pixelRounded[1] + dotRadius >= 0 &&
pixelRounded[1] - dotRadius < height
) {
ctx.fillStyle = dotFill;
ctx.beginPath();
@@ -76,7 +80,7 @@ export default class ScatterplotOverlay extends PureComponent {
}
}
}
}
};
/* eslint-enable max-statements */

render() {
@@ -6,13 +6,8 @@ const resolve = require('path').resolve;
const webpack = require('webpack');

const BABEL_CONFIG = {
presets: [
'@babel/env',
'@babel/react'
],
plugins: [
'@babel/proposal-class-properties'
]
presets: ['@babel/env', '@babel/react'],
plugins: ['@babel/proposal-class-properties']
};

const config = {
@@ -27,24 +22,26 @@ const config = {
},

module: {
rules: [{
// Compile ES2015 using babel
test: /\.js$/,
include: [resolve('.')],
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: BABEL_CONFIG
}]
}]
rules: [
{
// Compile ES2015 using babel
test: /\.js$/,
include: [resolve('.')],
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: BABEL_CONFIG
}
]
}
]
},

// Optional: Enables reading mapbox token from environment variable
plugins: [
new webpack.EnvironmentPlugin(['MapboxAccessToken'])
]
plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken'])]
};

// Enables bundling against src in this repo rather than the installed version
module.exports = env => env && env.local ?
require('../webpack.config.local')(config)(env) : config;
module.exports = env =>
env && env.local ? require('../webpack.config.local')(config)(env) : config;

0 comments on commit 1da1398

Please sign in to comment.
You can’t perform that action at this time.