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.

Sign up for GitHub

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

Jump to bottom

Create @nebula.gl/layers #189

Merged
merged 4 commits into from Mar 21, 2019
Merged

Create @nebula.gl/layers #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe42509
Create @nebula.gl/layers
georgios-uber Mar 21, 2019
7d647de
Fix all path errors
georgios-uber Mar 21, 2019
96b8115
fix unit tests
georgios-uber Mar 21, 2019
24c9feb
fix examples
georgios-uber Mar 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Expand Up @@ -20,3 +20,4 @@ yarn-error.log

# copied as part of a build step
modules/core/README.md
modules/layers/README.md
39 changes: 23 additions & 16 deletions examples/sf/example.js
View file
Open in desktop
Expand Up @@ -4,9 +4,9 @@ import React, { Component } from 'react';
import DeckGL, { TextLayer } from 'deck.gl';
import MapGL from 'react-map-gl';

import { Feature, SegmentsLayer, SELECTION_TYPE } from 'nebula.gl';
import { NebulaCore, Feature, SegmentsLayer, SELECTION_TYPE } from 'nebula.gl';

import { HtmlTooltipOverlay, Nebula } from 'nebula.gl-react';
// import { HtmlTooltipOverlay } from '@nebula.gl/overlays';

import testPolygons from '../data/sf-polygons';

Expand Down Expand Up @@ -62,6 +62,9 @@ export default class Example extends Component<
this.segmentsLayer.highlightColor = [1, 1, 1, 1];
this.segmentsLayer.arrowSize = 50;

this.nebula = new NebulaCore();
this.nebula.init({});

this._loadData(
'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/layer-browser/sfmta.routes.json'
);
Expand All @@ -75,7 +78,7 @@ export default class Example extends Component<
window.removeEventListener('resize', this._resize);
}

nebula: Nebula;
nebula: NebulaCore;
testSegments: Object[];
segmentsLayer: SegmentsLayer;

Expand Down Expand Up @@ -198,7 +201,7 @@ export default class Example extends Component<
render() {
const { segmentsLayer, state } = this;
let { viewport } = state;
const { selectionType } = state;
// const { selectionType } = state;

const { innerHeight: height, innerWidth: width } = window;
viewport = Object.assign(viewport, { height, width });
Expand Down Expand Up @@ -227,32 +230,36 @@ export default class Example extends Component<
// pointHighlightColor: [0xff, 0xff, 0xff, 0xff]
// });

/*
<Nebula
ref={nebula => (this.nebula = nebula || this.nebula)}
viewport={viewport}
layers={nebulaLayers}
onSelection={this._onSelect}
selectionType={selectionType}
onMapMouseEvent={() => this.forceUpdate()}
>
<HtmlTooltipOverlay />
</Nebula>
*/

const textLayer = new TextLayer({
id: 'text-layer',
data: [
{
text: 'This DeckGL layer is rendered inside NebulaGL :-)',
text: 'Text Layer :-)',
position: [-122.4, 37.7]
}
]
});
const nebulaLayers = [segmentsLayer];
const deckLayers = [textLayer];
const deckLayers = this.nebula.updateAndGetRenderedLayers(nebulaLayers, viewport, this);
deckLayers.push(textLayer);

return (
<div style={styles.mapContainer}>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" rel="stylesheet" />
<MapGL {...viewport} onChangeViewport={this._onChangeViewport}>
<Nebula
ref={nebula => (this.nebula = nebula || this.nebula)}
viewport={viewport}
layers={nebulaLayers}
onSelection={this._onSelect}
selectionType={selectionType}
onMapMouseEvent={() => this.forceUpdate()}
>
<HtmlTooltipOverlay />
</Nebula>
<DeckGL {...viewport} onLayerClick={this._onLayerClick} layers={deckLayers} />
</MapGL>

Expand Down
6 changes: 3 additions & 3 deletions examples/webpack.config.local.js
View file
Open in desktop
Expand Up @@ -11,7 +11,7 @@ const webpack = require('webpack');

const LIB_DIR = resolve(__dirname, '..');
const CORE_SRC_DIR = resolve(LIB_DIR, './modules/core/src');
const REACT_SRC_DIR = resolve(LIB_DIR, './modules/react/src');
const LAYERS_SRC_DIR = resolve(LIB_DIR, './modules/layers/src');
const OVERLAYS_SRC_DIR = resolve(LIB_DIR, './modules/overlays/src');

// const babelConfig = require('../babel.config');
Expand All @@ -33,8 +33,8 @@ function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR) {
'nebula.gl/dist': CORE_SRC_DIR,
'nebula.gl': CORE_SRC_DIR,

'nebula.gl-react/dist': REACT_SRC_DIR,
'nebula.gl-react': REACT_SRC_DIR,
'@nebula.gl/layers/dist': LAYERS_SRC_DIR,
'@nebula.gl/layers': LAYERS_SRC_DIR,

'@nebula.gl/overlays/dist': OVERLAYS_SRC_DIR,
'@nebula.gl/overlays': OVERLAYS_SRC_DIR,
Expand Down
1 change: 1 addition & 0 deletions modules/core/package.json
View file
Open in desktop
Expand Up @@ -45,6 +45,7 @@
"test-rendering": "(cd test/rendering-test && webpack-dev-server --config webpack.config.test-rendering.js --progress --hot --open)"
},
"dependencies": {
"@nebula.gl/layers": "^0.0.2",
"@luma.gl/constants": "^7.0.0-alpha.3",
"@turf/bbox": ">=4.0.0",
"@turf/bbox-polygon": ">=4.0.0",
Expand Down
50 changes: 18 additions & 32 deletions modules/core/src/index.js
View file
Open in desktop
@@ -1,5 +1,4 @@
// @flow
// PURE JS BINDINGS

export { ArrowStyles, DEFAULT_ARROWS, MAX_ARROWS } from './lib/style';
export { SELECTION_TYPE } from './lib/deck-renderer/deck-drawer';
Expand All @@ -9,44 +8,31 @@ export { default as LayerMouseEvent } from './lib/layer-mouse-event';

export { default as NebulaLayer } from './lib/nebula-layer';
export { default as JunctionsLayer } from './lib/layers/junctions-layer';
export { default as EditableGeoJsonLayer } from './lib/layers/editable-geojson-layer';
export { default as TextsLayer } from './lib/layers/texts-layer';
export { default as SegmentsLayer } from './lib/layers/segments-layer';
export { default as SelectionLayer } from './lib/layers/selection-layer';

export { default as NebulaCore } from './lib/nebula';

// layers moved from deck.gl
export { default as PathOutlineLayer } from './lib/layers/path-outline-layer/path-outline-layer';
export { default as PathMarkerLayer } from './lib/layers/path-marker-layer/path-marker-layer';

// Mode Handlers
export { ModeHandler } from './lib/mode-handlers/mode-handler.js';
export { CompositeModeHandler } from './lib/mode-handlers/composite-mode-handler.js';

export { ModifyHandler } from './lib/mode-handlers/modify-handler.js';
export { DrawPointHandler } from './lib/mode-handlers/draw-point-handler.js';
export { DrawLineStringHandler } from './lib/mode-handlers/draw-line-string-handler.js';
export { DrawPolygonHandler } from './lib/mode-handlers/draw-polygon-handler.js';
export { DrawRectangleHandler } from './lib/mode-handlers/draw-rectangle-handler.js';
export {
DrawRectangleUsingThreePointsHandler
} from './lib/mode-handlers/draw-rectangle-using-three-points-handler.js';
export {
DrawCircleFromCenterHandler
} from './lib/mode-handlers/draw-circle-from-center-handler.js';
export {
DrawCircleByBoundingBoxHandler
} from './lib/mode-handlers/draw-circle-by-bounding-box-handler.js';
export {
DrawEllipseByBoundingBoxHandler
} from './lib/mode-handlers/draw-ellipse-by-bounding-box-handler.js';
export {
DrawEllipseUsingThreePointsHandler
} from './lib/mode-handlers/draw-ellipse-using-three-points-handler.js';

// Utils
export { toDeckColor } from './lib/utils';

// Types
export type { Color, Style } from './types';

// Moved to @nebula.gl/layers
export { EditableGeoJsonLayer } from '@nebula.gl/layers';
export { SelectionLayer } from '@nebula.gl/layers';
export { PathOutlineLayer } from '@nebula.gl/layers';
export { PathMarkerLayer } from '@nebula.gl/layers';
export { ModeHandler } from '@nebula.gl/layers';
export { CompositeModeHandler } from '@nebula.gl/layers';
export { ModifyHandler } from '@nebula.gl/layers';
export { DrawPointHandler } from '@nebula.gl/layers';
export { DrawLineStringHandler } from '@nebula.gl/layers';
export { DrawPolygonHandler } from '@nebula.gl/layers';
export { DrawRectangleHandler } from '@nebula.gl/layers';
export { DrawRectangleUsingThreePointsHandler } from '@nebula.gl/layers';
export { DrawCircleFromCenterHandler } from '@nebula.gl/layers';
export { DrawCircleByBoundingBoxHandler } from '@nebula.gl/layers';
export { DrawEllipseByBoundingBoxHandler } from '@nebula.gl/layers';
export { DrawEllipseUsingThreePointsHandler } from '@nebula.gl/layers';
5 changes: 1 addition & 4 deletions modules/core/src/lib/layers/junctions-layer.js
View file
Open in desktop
@@ -1,7 +1,5 @@
// @flow
import { COORDINATE_SYSTEM } from 'deck.gl';

import JunctionScatterplotLayer from '../deck-renderer/junction-scatterplot-layer';
import { JunctionScatterplotLayer } from '@nebula.gl/layers';
import NebulaLayer from '../nebula-layer';
import { toDeckColor } from '../utils';
import DeckCache from '../deck-renderer/deck-cache';
Expand Down Expand Up @@ -36,7 +34,6 @@ export default class JunctionsLayer extends NebulaLayer {
blend: false
},

coordinateSystem: COORDINATE_SYSTEM.LNGLAT_EXPERIMENTAL,
updateTriggers: { all: updateTrigger },

nebulaLayer: this
Expand Down
5 changes: 1 addition & 4 deletions modules/core/src/lib/layers/segments-layer.js
View file
Open in desktop
@@ -1,14 +1,12 @@
// @flow
import { COORDINATE_SYSTEM } from 'deck.gl';
import { PathMarkerLayer } from '@nebula.gl/layers';
import { MAX } from 'luma.gl/constants';

import { ArrowStyles, DEFAULT_STYLE, MAX_ARROWS } from '../style';
import NebulaLayer from '../nebula-layer';
import { toDeckColor } from '../utils';
import DeckCache from '../deck-renderer/deck-cache';

import PathMarkerLayer from './path-marker-layer/path-marker-layer';

const NEBULA_TO_DECK_DIRECTIONS = {
[ArrowStyles.NONE]: { forward: false, backward: false },
[ArrowStyles.FORWARD]: { forward: true, backward: false },
Expand Down Expand Up @@ -94,7 +92,6 @@ export default class SegmentsLayer extends NebulaLayer {
getDirection: nf => NEBULA_TO_DECK_DIRECTIONS[nf.style.arrowStyle],
getMarkerColor: nf => toDeckColor(nf.style.arrowColor, defaultColor),
getMarkerPercentages: this._calcMarkerPercentages,
coordinateSystem: COORDINATE_SYSTEM.LNGLAT_EXPERIMENTAL,
updateTriggers: { all: updateTrigger },

highlightedObjectIndex: this._getHighlightedObjectIndex({ nebula }),
Expand Down
36 changes: 0 additions & 36 deletions modules/core/src/lib/utils.js
View file
Open in desktop
@@ -1,11 +1,5 @@
// @flow

import destination from '@turf/destination';
import bearing from '@turf/bearing';
import pointToLineDistance from '@turf/point-to-line-distance';
import { point } from '@turf/helpers';
import type { Position, LineString } from '../geojson-types.js';

export function toDeckColor(
color?: ?[number, number, number, number],
defaultColor: [number, number, number, number] = [255, 0, 0, 255]
Expand Down Expand Up @@ -57,33 +51,3 @@ export function recursivelyTraverseNestedArrays(
}
return false;
}

export function generatePointsParallelToLinePoints(
p1: Position,
p2: Position,
groundCoords: Position
): Position[] {
const lineString: LineString = {
type: 'LineString',
coordinates: [p1, p2]
};
const pt = point(groundCoords);
const ddistance = pointToLineDistance(pt, lineString);
const lineBearing = bearing(p1, p2);

// Check if current point is to the left or right of line
// Line from A=(x1,y1) to B=(x2,y2) a point P=(x,y)
// then (x−x1)(y2−y1)−(y−y1)(x2−x1)
const isPointToLeftOfLine =
(groundCoords[0] - p1[0]) * (p2[1] - p1[1]) - (groundCoords[1] - p1[1]) * (p2[0] - p1[0]);

// Bearing to draw perpendicular to the line string
const orthogonalBearing = isPointToLeftOfLine < 0 ? lineBearing - 90 : lineBearing - 270;

// Get coordinates for the point p3 and p4 which are perpendicular to the lineString
// Add the distance as the current position moves away from the lineString
const p3 = destination(p2, ddistance, orthogonalBearing);
const p4 = destination(p1, ddistance, orthogonalBearing);

return [p3.geometry.coordinates, p4.geometry.coordinates];
}
77 changes: 77 additions & 0 deletions modules/layers/package.json
View file
Open in desktop
@@ -0,0 +1,77 @@
{
"name": "@nebula.gl/layers",
"description": "A suite of 3D-enabled data editing layers, suitable for deck.gl",
"license": "MIT",
"version": "0.10.5",
"author": "Georgios Karnas <georgios@uber.com>",
"repository": {
"type": "git",
"url": "https://github.com/uber/nebula.gl"
},
"keywords": [
"webgl",
"visualization",
"overlay",
"layer"
],
"main": "dist/index.js",
"module": "dist-es6/index.js",
"files": [
"dist",
"dist-es6",
"src"
],
"scripts": {
"build-clean": "rm -fr dist dist-es6 && mkdir -p dist dist-es6",
"build-es6": "rm -fr dist-es6 && BABEL_ENV=es6 babel src --config-file ../../babel.config.js --out-dir dist-es6 --source-maps inline",
"build-es5": "rm -fr dist && BABEL_ENV=es5 babel src --config-file ../../babel.config.js --out-dir dist --source-maps inline",
"build": "yarn build-clean && yarn build-es6 && yarn build-es5 && cp ../../README.md .",
"flow": "(cd ../.. && yarn flow)",
"lint": "(cd ../.. && yarn lint)",
"prepublish": "yarn build",
"publish-prod": "yarn build && yarn test && yarn test-dist && npm publish",
"publish-beta": "yarn build && yarn test && yarn test-dist && npm publish --tag beta",
"test": "yarn lint && yarn build && yarn flow && yarn jest",
"test-r": "yarn lint && yarn build && yarn test-node && (cd test/rendering-test && node node-rendering.js)",
"test-fast": "yarn test-node",
"test-ci": "yarn lint && node test/node-ci.js",
"test-cover": "NODE_ENV=test tape -r babel-register test/node.js && nyc report",
"test-node": "(cd ../.. && node test/node.js)",
"test-dist": "(cd ../.. && node test/node-dist.js)",
"test-browser": "webpack-dev-server --env.test --progress --hot --open",
"jest": "(cd ../.. && jest src)",
"bench": "node test/bench/node.js",
"bench-browser": "webpack-dev-server --env.bench --progress --hot --open",
"test-rendering": "(cd test/rendering-test && webpack-dev-server --config webpack.config.test-rendering.js --progress --hot --open)"
},
"dependencies": {
"@luma.gl/constants": "^7.0.0-alpha.3",
"@turf/bbox": ">=4.0.0",
"@turf/bbox-polygon": ">=4.0.0",
"@turf/bearing": ">=4.0.0",
"@turf/boolean-point-in-polygon": ">=4.0.0",
"@turf/buffer": ">=4.0.0",
"@turf/center": ">=4.0.0",
"@turf/centroid": ">=4.0.0",
"@turf/circle": ">=4.0.0",
"@turf/destination": ">=4.0.0",
"@turf/difference": ">=4.0.0",
"@turf/distance": ">=4.0.0",
"@turf/ellipse": ">=4.0.0",
"@turf/helpers": ">=4.0.0",
"@turf/intersect": ">=4.0.0",
"@turf/line-intersect": ">=4.0.0",
"@turf/nearest-point-on-line": ">=4.0.0",
"@turf/point-to-line-distance": ">=4.0.0",
"@turf/polygon-to-line": ">=4.0.0",
"@turf/transform-rotate": ">=4.0.0",
"@turf/transform-scale": ">=4.0.0",
"@turf/transform-translate": ">=4.0.0",
"@turf/union": ">=4.0.0",
"cubic-hermite-spline": "^1.0.1",
"deck.gl": ">=6.0.5",
"geojson-types": "^2.0.1",
"global": ">=4.3.0",
"viewport-mercator-project": ">=5.0.0"
}
}
0 modules/core/src/lib/curve-utils.js → modules/layers/src/curve-utils.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion modules/core/src/lib/event-types.js → modules/layers/src/event-types.js
View file
Open in desktop
@@ -1,5 +1,5 @@
// @flow
import type { Position } from '../geojson-types.js';
import type { Position } from './geojson-types.js';

export type DeckGLPick = {
index: number,
Expand Down
0 modules/core/src/geojson-types.js → modules/layers/src/geojson-types.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...e/src/lib/immutable-feature-collection.js → ...ayers/src/immutable-feature-collection.js
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ import type {
MultiPolygon,
Position,
PolygonCoordinates
} from '../geojson-types.js';
} from './geojson-types.js';

export class ImmutableFeatureCollection {
featureCollection: FeatureCollection;
Expand Down