Skip to content

Commit 868bccd

Browse files
birkskyumbirkskyum
authored
Add nebula examples to website (#76)
1 parent f23e7eb commit 868bccd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+11201
-15265
lines changed

‎docs/modules/editable-layers/sidebar.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"type": "category",
3-
"label": "deck.gl-community/editable-layers",
3+
"label": "@deck.gl-community/editable-layers",
44
"items": [
55
"modules/editable-layers/README",
66
"modules/editable-layers/developer-guide/get-started",

‎examples/editable-layers/advanced/src/example.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const ALL_MODES: any = [
104104
{label: 'Draw Point', mode: DrawPointMode},
105105
{label: 'Draw LineString', mode: DrawLineStringMode},
106106
{label: 'Draw Polygon', mode: DrawPolygonMode},
107-
{label: 'Draw 90° Polygon', mode: Draw90DegreePolygonMode},
107+
// {label: 'Draw 90° Polygon', mode: Draw90DegreePolygonMode},
108108
{label: 'Draw Polygon By Dragging', mode: DrawPolygonByDraggingMode},
109109
{label: 'Draw Rectangle', mode: DrawRectangleMode},
110110
{label: 'Draw Rectangle From Center', mode: DrawRectangleFromCenterMode},

‎examples/editable-layers/advanced/src/toolbox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Toolbox = styled.div`
1818
font-family: Arial, Helvetica, sans-serif;
1919
font-size: 16px;
2020
overflow: auto;
21-
z-index: 999;
21+
z-index: 30;
2222
`;
2323

2424
export const ToolboxRow = (props) => <div>{props.children}</div>;

‎examples/editable-layers/editor/example.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export function Example() {
8484
</DeckGL>
8585

8686
<Toolbox
87+
left={true}
8788
geoJson={geoJson}
8889
mode={mode}
8990
modeConfig={modeConfig}

‎modules/react-editable-layers/src/toolbox.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ import {Icon} from '@deck.gl-community/react';
1616
import {ImportModal} from './import-modal';
1717
import {ExportModal} from './export-modal';
1818

19-
const Tools = styled.div`
19+
const Tools = styled.div<{left: boolean}>`
2020
position: absolute;
2121
display: flex;
2222
flex-direction: column;
2323
top: 10px;
24-
right: 10px;
24+
${(props) => (props.left ? 'left' : 'right')}: 10px;
2525
`;
2626

2727
const Button = styled.button<{active?: boolean; kind?: string}>`
@@ -46,15 +46,16 @@ const SubToolsContainer = styled.div`
4646
position: relative;
4747
`;
4848

49-
const SubTools = styled.div`
49+
const SubTools = styled.div<{left: boolean}>`
5050
display: flex;
5151
flex-direction: row-reverse;
5252
position: absolute;
5353
top: 0;
54-
right: 0;
54+
${(props) => (props.left ? 'left' : 'right')}: 0;
5555
`;
5656

5757
export type Props = {
58+
left?: boolean;
5859
mode: any;
5960
modeConfig: any;
6061
geoJson: any;
@@ -102,7 +103,7 @@ function ModeButton({buttonConfig, mode, onClick}: any) {
102103
</Button>
103104
);
104105
}
105-
function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
106+
function ModeGroupButtons({left, modeGroup, mode, onSetMode}: any) {
106107
const [expanded, setExpanded] = React.useState(false);
107108

108109
const {modes} = modeGroup;
@@ -111,7 +112,7 @@ function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
111112

112113
if (expanded) {
113114
subTools = (
114-
<SubTools>
115+
<SubTools left={left}>
115116
{modes.map((buttonConfig, i) => (
116117
<ModeButton
117118
key={i}
@@ -146,6 +147,7 @@ function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
146147
}
147148

148149
export function Toolbox({
150+
left = false,
149151
mode,
150152
modeConfig,
151153
geoJson,
@@ -161,9 +163,15 @@ export function Toolbox({
161163

162164
return (
163165
<>
164-
<Tools>
166+
<Tools left={left}>
165167
{MODE_GROUPS.map((modeGroup, i) => (
166-
<ModeGroupButtons key={i} modeGroup={modeGroup} mode={mode} onSetMode={onSetMode} />
168+
<ModeGroupButtons
169+
left={left}
170+
key={i}
171+
modeGroup={modeGroup}
172+
mode={mode}
173+
onSetMode={onSetMode}
174+
/>
167175
))}
168176

169177
{/* <box-icon name='current-location' ></box-icon> */}
@@ -176,7 +184,7 @@ export function Toolbox({
176184

177185
<SubToolsContainer>
178186
{showConfig && (
179-
<SubTools>
187+
<SubTools left={left}>
180188
<Button onClick={() => setShowConfig(false)}>
181189
<Icon name="chevron-right" />
182190
</Button>
@@ -210,7 +218,7 @@ export function Toolbox({
210218

211219
<SubToolsContainer>
212220
{showClearConfirmation && (
213-
<SubTools>
221+
<SubTools left={left}>
214222
<Button
215223
onClick={() => {
216224
onSetGeoJson({type: 'FeatureCollection', features: []});

‎website/docusaurus.config.js

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,28 +50,37 @@ const config = {
5050
resolve: {
5151
modules: [resolve('node_modules'), resolve('../node_modules')],
5252
alias: {
53-
'@deck.gl/aggregation-layers': resolve('../modules/aggregation-layers/src'),
54-
'@deck.gl/arcgis': resolve('../modules/arcgis/src'),
55-
'@deck.gl/carto': resolve('../modules/carto/src'),
56-
'@deck.gl/core': resolve('../modules/core/src'),
57-
'@deck.gl/extensions': resolve('../modules/extensions/src'),
58-
'@deck.gl/geo-layers': resolve('../modules/geo-layers/src'),
59-
'@deck.gl/google-maps': resolve('../modules/google-maps/src'),
60-
'@deck.gl/json': resolve('../modules/json/src'),
61-
'@deck.gl/layers': resolve('../modules/layers/src'),
62-
'@deck.gl/mapbox': resolve('../modules/mapbox/src'),
63-
'@deck.gl/mesh-layers': resolve('../modules/mesh-layers/src'),
64-
'@deck.gl/react': resolve('../modules/react/src'),
65-
'website-examples': resolve('../examples/website'),
53+
'examples': resolve('../examples'),
54+
'@deck.gl-community/bing-maps': resolve('../modules/bing-maps/src'),
55+
'@deck.gl-community/graph-layers': resolve('../modules/graph-layers/src'),
56+
'@deck.gl-community/react': resolve('../modules/react/src'),
57+
'@deck.gl-community/layers': resolve('../modules/layers/src'),
58+
'@deck.gl-community/arrow-layers': resolve('../modules/arrow-layers/src'),
59+
'@deck.gl-community/editable-layers': resolve('../modules/editable-layers/src'),
60+
'@deck.gl-community/react-editable-layers': resolve('../modules/react-editable-layers/src'),
61+
'react-deck-graph-layers': resolve('../modules/react-graph-layers/src'),
6662
react: resolve('node_modules/react'),
6763
'react-dom': resolve('node_modules/react-dom'),
64+
'@deck.gl/aggregation-layers': resolve('../node_modules/@deck.gl/aggregation-layers'),
65+
'@deck.gl/arcgis': resolve('../node_modules/@deck.gl/arcgis'),
66+
'@deck.gl/carto': resolve('../node_modules/@deck.gl/carto'),
67+
'@deck.gl/core': resolve('../node_modules/@deck.gl/core'),
68+
'@deck.gl/extensions': resolve('../node_modules/@deck.gl/extensions'),
69+
'@deck.gl/geo-layers': resolve('../node_modules/@deck.gl/geo-layers'),
70+
'@deck.gl/google-maps': resolve('../node_modules/@deck.gl/google-maps'),
71+
'@deck.gl/json': resolve('../node_modules/@deck.gl/json'),
72+
'@deck.gl/layers': resolve('../node_modules/@deck.gl/layers'),
73+
'@deck.gl/mapbox': resolve('../node_modules/@deck.gl/mapbox'),
74+
'@deck.gl/mesh-layers': resolve('../node_modules/@deck.gl/mesh-layers'),
75+
'@deck.gl/react': resolve('../node_modules/@deck.gl/react'),
6876
'@luma.gl': resolve('../node_modules/@luma.gl'),
6977
'@math.gl': resolve('../node_modules/@math.gl'),
7078
'@loaders.gl/i3s': resolve('node_modules/@loaders.gl/i3s'),
7179
'@loaders.gl/las': resolve('node_modules/@loaders.gl/las'),
7280
'@loaders.gl/obj': resolve('node_modules/@loaders.gl/obj'),
7381
'@loaders.gl/ply': resolve('node_modules/@loaders.gl/ply'),
74-
'@loaders.gl': resolve('../node_modules/@loaders.gl')
82+
'@loaders.gl': resolve('../node_modules/@loaders.gl'),
83+
'styled-react-modal': resolve('node_modules/styled-react-modal')
7584
}
7685
},
7786
plugins: [

‎website/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,13 @@
3131
"d3-scale": "^3.2.1",
3232
"expr-eval": "^2.0.2",
3333
"mapbox-gl": "^2.0.0",
34-
"maplibre-gl": "^2.4.0",
34+
"maplibre-gl": "^4.1.3",
3535
"react": "^18.2.0",
3636
"react-ace": "^6.1.4",
3737
"react-dom": "^18.2.0",
3838
"react-map-gl": "^7.1.7",
39-
"styled-components": "^5.3.11"
39+
"styled-components": "^5.3.11",
40+
"styled-react-modal": "^3.1.1"
4041
},
4142
"devDependencies": {
4243
"@docusaurus/core": "^3.2.1",

‎website/src/constants/defaults.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ export const MAPBOX_STYLES = {
1010
};
1111

1212
export const DATA_URI = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website';
13-
export const GITHUB_TREE = 'https://github.com/visgl/deck.gl/tree/master';
13+
export const GITHUB_TREE = 'https://github.com/visgl/deck.gl-community/tree/master';

‎website/src/examples-sidebar.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,22 @@
88
99
Create as many sidebars as you want.
1010
*/
11+
1112
const sidebars = {
1213
examplesSidebar: [
1314
{
1415
type: 'doc',
1516
label: 'Overview',
1617
id: 'index'
1718
},
19+
{
20+
type: 'category',
21+
label: '@deck.gl-community/editable-layers',
22+
items: [
23+
"editable-layers-editor",
24+
"editable-layers-advanced"
25+
]
26+
},
1827
// {
1928
// type: 'category',
2029
// label: 'Layers',

‎website/src/examples/editable-layers-advanced.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, {Component} from 'react';
2+
import {GITHUB_TREE} from '../constants/defaults';
3+
import App from 'examples/editable-layers/advanced/src/example';
4+
5+
import {makeExample} from '../components';
6+
7+
class AdvancedDemo extends Component {
8+
static title = 'Advanced';
9+
10+
static code = `${GITHUB_TREE}/examples/editable-layers/advanced`;
11+
12+
static renderInfo(meta) {
13+
return (
14+
<>
15+
</>
16+
);
17+
}
18+
19+
render() {
20+
const {params, ...otherProps} = this.props;
21+
22+
return (
23+
<App
24+
{...otherProps}
25+
/>
26+
);
27+
}
28+
}
29+
30+
export default makeExample(AdvancedDemo);

0 commit comments

Comments
 (0)