Remove layer specific components

This commit is contained in:
Lukas Martinelli 2016-12-19 15:56:19 +01:00
parent a52a548e51
commit 21bad041ab
5 changed files with 17 additions and 185 deletions

View file

@ -1,37 +0,0 @@
import React from 'react'
import Immutable from 'immutable'
import Input from 'rebass/dist/Input'
import { PropertyGroup } from '../fields/spec'
import PureRenderMixin from 'react-addons-pure-render-mixin';
//TODO: All layers contain a lot of redundancy
export default class BackgroundLayer extends React.Component {
static propTypes = {
layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
onPaintChanged: React.PropTypes.func.isRequired,
onLayoutChanged: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return <div>
<PropertyGroup
onChange={this.props.onLayoutChanged.bind(this)}
layerType="background"
groupType="layout"
properties={this.props.layer.get('layout', Immutable.Map())}
/>
<PropertyGroup
onChange={this.props.onPaintChanged.bind(this)}
layerType="background"
groupType="paint"
properties={this.props.layer.get('paint', Immutable.Map())}
/>
</div>
}
}

View file

@ -7,14 +7,9 @@ import Space from 'rebass/dist/Space'
import Tabs from 'react-simpletabs'
import theme from '../theme.js'
import FillLayer from './fill.jsx'
import LineLayer from './line.jsx'
import SymbolLayer from './symbol.jsx'
import BackgroundLayer from './background.jsx'
import SourceEditor from './source.jsx'
import FilterEditor from '../filter/editor.jsx'
import { PropertyGroup } from '../fields/spec.jsx'
import MdVisibility from 'react-icons/lib/md/visibility'
import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
@ -90,42 +85,6 @@ export class LayerEditor extends React.Component {
this.props.onLayerChanged(changedLayer)
}
layerFromType(type) {
if (type === "fill") {
return <FillLayer
layer={this.props.layer}
onPaintChanged={this.onPaintChanged.bind(this)}
onLayoutChanged={this.onLayoutChanged.bind(this)}
/>
}
if (type === "background") {
return <BackgroundLayer
layer={this.props.layer}
onPaintChanged={this.onPaintChanged.bind(this)}
onLayoutChanged={this.onLayoutChanged.bind(this)}
/>
}
if (type === "line") {
return <LineLayer
layer={this.props.layer}
onPaintChanged={this.onPaintChanged.bind(this)}
onLayoutChanged={this.onLayoutChanged.bind(this)}
/>
}
if (type === "symbol") {
return <SymbolLayer
layer={this.props.layer}
onPaintChanged={this.onPaintChanged.bind(this)}
onLayoutChanged={this.onLayoutChanged.bind(this)}
/>
}
return <UnsupportedLayer />
}
toggleVisibility() {
if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
this.onLayoutChanged('visibility', 'visible')
@ -158,7 +117,22 @@ export class LayerEditor extends React.Component {
<Tabs>
<Tabs.Panel title='Paint'>
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
{this.layerFromType(this.props.layer.get('type'))}
<PropertyGroup
onChange={this.onPaintChanged.bind(this)}
layerType={this.props.layer.get('type')}
groupType="paint"
properties={this.props.layer.get('paint', Immutable.Map())}
/>
</div>
</Tabs.Panel>
<Tabs.Panel title='Layout'>
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
<PropertyGroup
onChange={this.onLayoutChanged.bind(this)}
layerType={this.props.layer.get('type')}
groupType="layout"
properties={this.props.layer.get('layout', Immutable.Map())}
/>
</div>
</Tabs.Panel>
<Tabs.Panel title='Data'>

View file

@ -1,35 +0,0 @@
import React from 'react'
import Immutable from 'immutable'
import { PropertyGroup } from '../fields/spec'
import PureRenderMixin from 'react-addons-pure-render-mixin';
//TODO: All layers contain a lot of redundancy
export default class FillLayer extends React.Component {
static propTypes = {
layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
onPaintChanged: React.PropTypes.func.isRequired,
onLayoutChanged: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return <div>
<PropertyGroup
onChange={this.props.onLayoutChanged.bind(this)}
layerType="fill"
groupType="layout"
properties={this.props.layer.get('layout', Immutable.Map())}
/>
<PropertyGroup
onChange={this.props.onPaintChanged.bind(this)}
layerType="fill"
groupType="paint"
properties={this.props.layer.get('paint', Immutable.Map())}
/>
</div>
}
}

View file

@ -1,35 +0,0 @@
import React from 'react'
import Immutable from 'immutable'
import { PropertyGroup } from '../fields/spec'
import PureRenderMixin from 'react-addons-pure-render-mixin';
//TODO: All layers contain a lot of redundancy
export default class LineLayer extends React.Component {
static propTypes = {
layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
onPaintChanged: React.PropTypes.func.isRequired,
onLayoutChanged: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return <div>
<PropertyGroup
onChange={this.props.onLayoutChanged.bind(this)}
layerType="line"
groupType="layout"
properties={this.props.layer.get('layout', Immutable.Map())}
/>
<PropertyGroup
onChange={this.props.onPaintChanged.bind(this)}
layerType="line"
groupType="paint"
properties={this.props.layer.get('paint', Immutable.Map())}
/>
</div>
}
}

View file

@ -1,35 +0,0 @@
import React from 'react'
import Immutable from 'immutable'
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { PropertyGroup } from '../fields/spec'
//TODO: All layers contain a lot of redundancy
export default class SymbolLayer extends React.Component {
static propTypes = {
layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
onPaintChanged: React.PropTypes.func.isRequired,
onLayoutChanged: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return <div>
<PropertyGroup
onChange={this.props.onLayoutChanged.bind(this)}
layerType="symbol"
groupType="layout"
properties={this.props.layer.get('layout', Immutable.Map())}
/>
<PropertyGroup
onChange={this.props.onPaintChanged.bind(this)}
layerType="symbol"
groupType="paint"
properties={this.props.layer.get('paint', Immutable.Map())}
/>
</div>
}
}