maputnik/src/layers/editor.jsx

import React from 'react'
import Immutable from 'immutable'

import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
import Space from 'rebass/dist/Space'
import Tabs from 'react-simpletabs'

import theme from '../theme.js'
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'
import MdDelete from 'react-icons/lib/md/delete'
import PureRenderMixin from 'react-addons-pure-render-mixin';

import ScrollContainer from '../scrollcontainer.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,
    sources: React.PropTypes.instanceOf(Immutable.Map),
    onLayerChanged: React.PropTypes.func,
    onLayerDestroyed: React.PropTypes.func,
  }

  static defaultProps = {
    onLayerChanged: () => {},
    onLayerDestroyed: () => {},
  }

  static childContextTypes = {
    reactIconBase: React.PropTypes.object
  }

  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

  getChildContext () {
    return {
      reactIconBase: {
        size: theme.fontSizes[4],
        color: theme.colors.lowgray,
      }
    }
  }

  onPaintChanged(property, newValue) {
    let layer = this.props.layer
    //TODO: by using immutable records we can avoid this checking if object exists
    //
    if(!layer.has('paint')) {
      layer = layer.set('paint', Immutable.Map())
    }

    const changedLayer = layer.setIn(['paint', property], newValue)
    this.props.onLayerChanged(changedLayer)
  }

  onLayoutChanged(property, newValue) {
    let layer = this.props.layer
    //TODO: by using immutable records we can avoid this checking if object exists
    if(!layer.has('layout')) {
      layer = layer.set('layout', Immutable.Map())
    }

    const changedLayer = layer.setIn(['layout', property], newValue)
    this.props.onLayerChanged(changedLayer)
  }

  onFilterChanged(newValue) {
    let layer = this.props.layer
    const changedLayer = layer.set('filter', newValue)
    this.props.onLayerChanged(changedLayer)
  }

  toggleVisibility() {
    if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
      this.onLayoutChanged('visibility', 'visible')
    } else {
      this.onLayoutChanged('visibility', 'none')
    }
  }

  render() {
    let visibleIcon = <MdVisibilityOff />
    if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
      visibleIcon = <MdVisibility />
    }

    return <div style={{
        padding: theme.scale[0],
      }}>
      <Toolbar>
        <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>
      <Tabs>
        <Tabs.Panel title='Paint'>
          <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
          <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'>
          <FilterEditor
            filter={this.props.layer.get('filter', Immutable.List()).toJSON()}
            onChange={f => this.onFilterChanged(Immutable.fromJS(f))}
          />
           {this.props.layer.get('type') !== 'background' && <SourceEditor
              source={this.props.layer.get('source')}
              sourceLayer={this.props.layer.get('source-layer')}
              sources={this.props.sources}
              onSourceChange={console.log}
              onSourceLayerChange={console.log}
            />}
        </Tabs.Panel>
      </Tabs>
    </div>
  }
}