mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-26 18:40:37 +01:00
Restructure layers and clean up deps
This commit is contained in:
lukasmartinelli
parent
e0a8b0a8e9
commit
d527f3cd1c
10 changed files with 283 additions and 274 deletions
|
|
@ -4,6 +4,7 @@
|
|||
"description": "A MapboxGL visual style editor",
|
||||
"main": "''",
|
||||
"scripts": {
|
||||
"stats": "webpack --config webpack.production.config.js --profile --json > stats.json",
|
||||
"build": "webpack --config webpack.production.config.js --progress --profile --colors",
|
||||
"start": "webpack-dev-server --progress --profile --colors",
|
||||
"lint": "eslint --ext js --ext jsx src"
|
||||
|
|
@ -18,7 +19,6 @@
|
|||
"dependencies": {
|
||||
"file-saver": "^1.3.2",
|
||||
"immutable": "^3.8.1",
|
||||
"lodash": "^4.15.0",
|
||||
"mapbox-gl": "^0.23.0",
|
||||
"mapbox-gl-style-spec": "^8.8.0",
|
||||
"node-sass": "^3.9.2",
|
||||
|
|
@ -27,13 +27,9 @@
|
|||
"react-collapse": "^2.3.3",
|
||||
"react-dom": "15.3.0",
|
||||
"react-file-reader-input": "^1.1.0",
|
||||
"react-geomicons": "^2.0.5",
|
||||
"react-height": "^2.1.1",
|
||||
"react-icons": "^2.2.1",
|
||||
"react-mapbox-gl": "^0.11.0",
|
||||
"react-motion": "^0.4.4",
|
||||
"react-scrollbar": "^0.4.1",
|
||||
"react-tap-event-plugin": "^1.0.0",
|
||||
"rebass": "^0.3.1",
|
||||
"sass-loader": "^4.0.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { WorkspaceDrawer } from './workspace.jsx'
|
|||
|
||||
import theme from './theme.js'
|
||||
import layout from './layout.scss'
|
||||
import 'react-virtualized/styles.css'
|
||||
|
||||
export default class App extends React.Component {
|
||||
static childContextTypes = {
|
||||
|
|
|
|||
266
src/layers.jsx
266
src/layers.jsx
|
|
@ -1,266 +0,0 @@
|
|||
import React from 'react'
|
||||
import randomColor from 'randomcolor'
|
||||
import { Block, ButtonCircle, Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
|
||||
import { Button, Text } from 'rebass'
|
||||
import {MdVisibility, MdArrowDropDown, MdArrowDropUp, MdAddToPhotos, MdDelete, MdVisibilityOff} from 'react-icons/lib/md';
|
||||
import Collapse from 'react-collapse'
|
||||
import theme from './theme.js'
|
||||
import scrollbars from './scrollbars.scss'
|
||||
import _ from 'lodash'
|
||||
import Immutable from 'immutable'
|
||||
|
||||
export class FillLayer extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onPaintChanged: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
onPaintChanged(property, e) {
|
||||
let value = e.target.value
|
||||
if (property == "fill-opacity") {
|
||||
value = parseFloat(value)
|
||||
}
|
||||
|
||||
this.props.onPaintChanged(property, value)
|
||||
}
|
||||
|
||||
render() {
|
||||
const paint = this.props.layer.get('paint')
|
||||
return <div>
|
||||
<Input name="fill-color" label="Fill color" onChange={this.onPaintChanged.bind(this, "fill-color")} value={paint.get("fill-color")} />
|
||||
<Input name="fill-outline-color" label="Fill outline color" onChange={this.onPaintChanged.bind(this, "fill-outline-color")} value={paint.get("fill-outline-color")} />
|
||||
<Input name="fill-translate" label="Fill translate" onChange={this.onPaintChanged.bind(this, "fill-translate")} value={paint.get("fill-translate")} />
|
||||
<Input name="fill-translate-anchor" label="Fill translate anchor" onChange={this.onPaintChanged.bind(this, "fill-translate-anchor")} value={paint.get("fill-translate-anchor")} />
|
||||
<Checkbox name="fill-antialias" label="Antialias" onChange={this.onPaintChanged.bind(this, "fill-antialias")} checked={paint.get("fill-antialias")} />
|
||||
<Input name="fill-opacity" label="Opacity" onChange={this.onPaintChanged.bind(this, "fill-opacity")} value={paint.get("fill-opacity")} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
export class BackgroundLayer extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onPaintChanged: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
onPaintChanged(property, e) {
|
||||
let value = e.target.value
|
||||
if (property == "background-opacity" && !isNaN(parseFloat(value))) {
|
||||
value = parseFloat(value)
|
||||
}
|
||||
this.props.onPaintChanged(property, value)
|
||||
}
|
||||
|
||||
render() {
|
||||
const paint = this.props.layer.get('paint')
|
||||
return <div>
|
||||
<Input name="background-color" label="Background color" onChange={this.onPaintChanged.bind(this, "background-color")} value={paint.get("background-color")} />
|
||||
<Input name="background-opacity" label="Background opacity" onChange={this.onPaintChanged.bind(this, "background-opacity")} value={paint.get("background-opacity")} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
export class LineLayer extends React.Component {
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
|
||||
export class SymbolLayer extends React.Component {
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
|
||||
export class NoLayer extends React.Component {
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
|
||||
export class LayerPanel extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onLayerChanged: React.PropTypes.func.isRequired,
|
||||
onLayerDestroyed: React.PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
static childContextTypes = {
|
||||
reactIconBase: React.PropTypes.object
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOpened: false,
|
||||
}
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
return {
|
||||
reactIconBase: {
|
||||
size: theme.fontSizes[4],
|
||||
color: theme.colors.lowgray,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPaintChanged(property, newValue) {
|
||||
const changedLayer = this.props.layer.setIn(['paint', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
|
||||
onLayoutChanged(property, newValue) {
|
||||
const changedLayer = this.props.layer.setIn(['layout', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
|
||||
toggleLayer() {
|
||||
this.setState({isOpened: !this.state.isOpened})
|
||||
}
|
||||
|
||||
layerFromType(type) {
|
||||
if (type === "fill") {
|
||||
return <FillLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type === "background") {
|
||||
return <BackgroundLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type === "line") {
|
||||
return <LineLayer />
|
||||
}
|
||||
|
||||
if (type === "symbol") {
|
||||
return <SymbolLayer />
|
||||
}
|
||||
|
||||
return <NoLayer />
|
||||
}
|
||||
|
||||
toggleVisibility() {
|
||||
if(this.props.layer.layout.visibility === 'none') {
|
||||
this.onLayoutChanged('visibility', 'visible')
|
||||
} else {
|
||||
this.onLayoutChanged('visibility', 'none')
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let visibleIcon = <MdVisibilityOff />
|
||||
if(this.props.layer.layout && this.props.layer.layout.visibility === 'none') {
|
||||
visibleIcon = <MdVisibility />
|
||||
}
|
||||
|
||||
return <div style={{
|
||||
padding: theme.scale[0],
|
||||
borderBottom: 1,
|
||||
borderTop: 1,
|
||||
borderLeft: 2,
|
||||
borderRight: 0,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.borderColor,
|
||||
borderLeftColor: this.props.layer.getIn(['metadata', 'mapolo:color'])
|
||||
}}>
|
||||
<Toolbar onClick={this.toggleLayer.bind(this)}>
|
||||
<NavItem style={{fontWeight: 400}}>
|
||||
#{this.props.layer.get('id')}
|
||||
</NavItem>
|
||||
<Space auto x={1} />
|
||||
<NavItem onClick={this.toggleVisibility.bind(this)}>
|
||||
{visibleIcon}
|
||||
</NavItem>
|
||||
<NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
|
||||
<MdDelete />
|
||||
</NavItem>
|
||||
</Toolbar>
|
||||
<Collapse isOpened={this.state.isOpened}>
|
||||
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
|
||||
{this.layerFromType(this.props.layer.get('type'))}
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
export class LayerEditor extends React.Component {
|
||||
static propTypes = {
|
||||
layers: React.PropTypes.instanceOf(Immutable.List),
|
||||
onLayersChanged: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
onLayerDestroyed(deletedLayer) {
|
||||
//TODO: That's just horrible...
|
||||
let deleteIdx = -1
|
||||
|
||||
for (let i = 0; i < this.props.layers.length; i++) {
|
||||
if(this.props.layers[i].id == deletedLayer.id) {
|
||||
deleteIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const remainingLayers = this.props.layers.slice(0)
|
||||
remainingLayers.splice(deleteIdx, 0)
|
||||
this.props.onLayersChanged(remainingLayers)
|
||||
}
|
||||
|
||||
onLayerChanged(changedLayer) {
|
||||
//TODO: That's just horrible...
|
||||
let changeIdx = -1
|
||||
for (let entry of this.props.layers.entries()) {
|
||||
let [i, layer] = entry
|
||||
if(layer.get('id') == changedLayer.get('id')) {
|
||||
changeIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const changedLayers = this.props.layers.set(changeIdx, changedLayer)
|
||||
this.props.onLayersChanged(changedLayers)
|
||||
}
|
||||
|
||||
render() {
|
||||
var layerPanels = []
|
||||
|
||||
for(let layer of this.props.layers) {
|
||||
layerPanels.push(<LayerPanel
|
||||
key={layer.get('id')}
|
||||
layer={layer}
|
||||
onLayerDestroyed={this.onLayerDestroyed.bind(this)}
|
||||
onLayerChanged={this.onLayerChanged.bind(this)}
|
||||
/>)
|
||||
}
|
||||
|
||||
return <div>
|
||||
<Toolbar style={{marginRight: 20}}>
|
||||
<NavItem>
|
||||
<Heading>Layers</Heading>
|
||||
</NavItem>
|
||||
<Space auto x={1} />
|
||||
</Toolbar>
|
||||
|
||||
<div className={scrollbars.darkScrollbar} style={{
|
||||
overflowY: "scroll",
|
||||
bottom:0,
|
||||
left:0,
|
||||
right:0,
|
||||
top:40,
|
||||
position: "absolute",
|
||||
}}>
|
||||
{layerPanels}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
26
src/layers/background.jsx
Normal file
26
src/layers/background.jsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react'
|
||||
import { Input } from 'rebass'
|
||||
|
||||
export default class BackgroundLayer extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onPaintChanged: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
onPaintChanged(property, e) {
|
||||
let value = e.target.value
|
||||
if (property == "background-opacity" && !isNaN(parseFloat(value))) {
|
||||
value = parseFloat(value)
|
||||
}
|
||||
this.props.onPaintChanged(property, value)
|
||||
}
|
||||
|
||||
render() {
|
||||
const paint = this.props.layer.get('paint')
|
||||
return <div>
|
||||
<Input name="background-color" label="Background color" onChange={this.onPaintChanged.bind(this, "background-color")} value={paint.get("background-color")} />
|
||||
<Input name="background-opacity" label="Background opacity" onChange={this.onPaintChanged.bind(this, "background-opacity")} value={paint.get("background-opacity")} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
129
src/layers/editor.jsx
Normal file
129
src/layers/editor.jsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import React from 'react'
|
||||
import { Toolbar, NavItem, Space} from 'rebass'
|
||||
import { MdVisibility, MdDelete, MdVisibilityOff } from 'react-icons/lib/md';
|
||||
import Collapse from 'react-collapse'
|
||||
import theme from '../theme.js'
|
||||
import FillLayer from './fill.jsx'
|
||||
import LineLayer from './line.jsx'
|
||||
import SymbolLayer from './line.jsx'
|
||||
import BackgroundLayer from './background.jsx'
|
||||
|
||||
class UnsupportedLayer extends React.Component {
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
|
||||
/** Layer editor supporting multiple types of layers. */
|
||||
export class LayerEditor extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onLayerChanged: React.PropTypes.func.isRequired,
|
||||
onLayerDestroyed: React.PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
static childContextTypes = {
|
||||
reactIconBase: React.PropTypes.object
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOpened: false,
|
||||
}
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
return {
|
||||
reactIconBase: {
|
||||
size: theme.fontSizes[4],
|
||||
color: theme.colors.lowgray,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPaintChanged(property, newValue) {
|
||||
const changedLayer = this.props.layer.setIn(['paint', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
|
||||
onLayoutChanged(property, newValue) {
|
||||
const changedLayer = this.props.layer.setIn(['layout', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
|
||||
toggleLayer() {
|
||||
this.setState({isOpened: !this.state.isOpened})
|
||||
}
|
||||
|
||||
layerFromType(type) {
|
||||
if (type === "fill") {
|
||||
return <FillLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type === "background") {
|
||||
return <BackgroundLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type === "line") {
|
||||
return <LineLayer />
|
||||
}
|
||||
|
||||
if (type === "symbol") {
|
||||
return <SymbolLayer />
|
||||
}
|
||||
|
||||
return <UnsupportedLayer />
|
||||
}
|
||||
|
||||
toggleVisibility() {
|
||||
if(this.props.layer.layout.visibility === 'none') {
|
||||
this.onLayoutChanged('visibility', 'visible')
|
||||
} else {
|
||||
this.onLayoutChanged('visibility', 'none')
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let visibleIcon = <MdVisibilityOff />
|
||||
if(this.props.layer.layout && this.props.layer.layout.visibility === 'none') {
|
||||
visibleIcon = <MdVisibility />
|
||||
}
|
||||
|
||||
return <div style={{
|
||||
padding: theme.scale[0],
|
||||
borderBottom: 1,
|
||||
borderTop: 1,
|
||||
borderLeft: 2,
|
||||
borderRight: 0,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.borderColor,
|
||||
borderLeftColor: this.props.layer.getIn(['metadata', 'mapolo:color'])
|
||||
}}>
|
||||
<Toolbar onClick={this.toggleLayer.bind(this)}>
|
||||
<NavItem style={{fontWeight: 400}}>
|
||||
#{this.props.layer.get('id')}
|
||||
</NavItem>
|
||||
<Space auto x={1} />
|
||||
<NavItem onClick={this.toggleVisibility.bind(this)}>
|
||||
{visibleIcon}
|
||||
</NavItem>
|
||||
<NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
|
||||
<MdDelete />
|
||||
</NavItem>
|
||||
</Toolbar>
|
||||
<Collapse isOpened={this.state.isOpened}>
|
||||
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
|
||||
{this.layerFromType(this.props.layer.get('type'))}
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
30
src/layers/fill.jsx
Normal file
30
src/layers/fill.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react'
|
||||
import { Checkbox, Input } from 'rebass'
|
||||
|
||||
export default class FillLayer extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onPaintChanged: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
onPaintChanged(property, e) {
|
||||
let value = e.target.value
|
||||
if (property == "fill-opacity") {
|
||||
value = parseFloat(value)
|
||||
}
|
||||
|
||||
this.props.onPaintChanged(property, value)
|
||||
}
|
||||
|
||||
render() {
|
||||
const paint = this.props.layer.get('paint')
|
||||
return <div>
|
||||
<Input name="fill-color" label="Fill color" onChange={this.onPaintChanged.bind(this, "fill-color")} value={paint.get("fill-color")} />
|
||||
<Input name="fill-outline-color" label="Fill outline color" onChange={this.onPaintChanged.bind(this, "fill-outline-color")} value={paint.get("fill-outline-color")} />
|
||||
<Input name="fill-translate" label="Fill translate" onChange={this.onPaintChanged.bind(this, "fill-translate")} value={paint.get("fill-translate")} />
|
||||
<Input name="fill-translate-anchor" label="Fill translate anchor" onChange={this.onPaintChanged.bind(this, "fill-translate-anchor")} value={paint.get("fill-translate-anchor")} />
|
||||
<Checkbox name="fill-antialias" label="Antialias" onChange={this.onPaintChanged.bind(this, "fill-antialias")} checked={paint.get("fill-antialias")} />
|
||||
<Input name="fill-opacity" label="Opacity" onChange={this.onPaintChanged.bind(this, "fill-opacity")} value={paint.get("fill-opacity")} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
7
src/layers/line.jsx
Normal file
7
src/layers/line.jsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react'
|
||||
|
||||
export default class LineLayer extends React.Component {
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
81
src/layers/list.jsx
Normal file
81
src/layers/list.jsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import React from 'react'
|
||||
import Immutable from 'immutable'
|
||||
import { Heading, Toolbar, NavItem, Space} from 'rebass'
|
||||
import { LayerEditor } from './editor.jsx'
|
||||
import scrollbars from '../scrollbars.scss'
|
||||
|
||||
// List of collapsible layer editors
|
||||
export class LayerList extends React.Component {
|
||||
static propTypes = {
|
||||
layers: React.PropTypes.instanceOf(Immutable.List),
|
||||
onLayersChanged: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
onLayerDestroyed(deletedLayer) {
|
||||
//TODO: That's just horrible...
|
||||
let deleteIdx = -1
|
||||
|
||||
for (let i = 0; i < this.props.layers.length; i++) {
|
||||
if(this.props.layers[i].id == deletedLayer.id) {
|
||||
deleteIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const remainingLayers = this.props.layers.slice(0)
|
||||
remainingLayers.splice(deleteIdx, 0)
|
||||
this.props.onLayersChanged(remainingLayers)
|
||||
}
|
||||
|
||||
onLayerChanged(changedLayer) {
|
||||
//TODO: That's just horrible...
|
||||
let changeIdx = -1
|
||||
for (let entry of this.props.layers.entries()) {
|
||||
let [i, layer] = entry
|
||||
if(layer.get('id') == changedLayer.get('id')) {
|
||||
changeIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const changedLayers = this.props.layers.set(changeIdx, changedLayer)
|
||||
this.props.onLayersChanged(changedLayers)
|
||||
}
|
||||
|
||||
render() {
|
||||
var layerPanels = []
|
||||
|
||||
for(let layer of this.props.layers) {
|
||||
layerPanels.push(<LayerEditor
|
||||
key={layer.get('id')}
|
||||
layer={layer}
|
||||
onLayerDestroyed={this.onLayerDestroyed.bind(this)}
|
||||
onLayerChanged={this.onLayerChanged.bind(this)}
|
||||
/>)
|
||||
}
|
||||
|
||||
return <div>
|
||||
<Toolbar style={{marginRight: 20}}>
|
||||
<NavItem>
|
||||
<Heading>Layers</Heading>
|
||||
</NavItem>
|
||||
<Space auto x={1} />
|
||||
</Toolbar>
|
||||
|
||||
<div className={scrollbars.darkScrollbar} style={{
|
||||
overflowY: "scroll",
|
||||
bottom:0,
|
||||
left:0,
|
||||
right:0,
|
||||
top:40,
|
||||
position: "absolute",
|
||||
}}>
|
||||
{layerPanels}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
7
src/layers/symbol.jsx
Normal file
7
src/layers/symbol.jsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react'
|
||||
|
||||
export default class SymbolLayer extends React.Component {
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import { LayerEditor } from './layers.jsx'
|
||||
import { LayerList } from './layers/list.jsx'
|
||||
import { SettingsEditor } from './settings.jsx'
|
||||
import theme from './theme.js'
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ export class WorkspaceDrawer extends React.Component {
|
|||
let workspaceContent = null
|
||||
|
||||
if(this.props.workContext === "layers") {
|
||||
workspaceContent = <LayerEditor
|
||||
workspaceContent = <LayerList
|
||||
onLayersChanged={this.onLayersChanged.bind(this)}
|
||||
layers={this.props.mapStyle.get('layers')}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue