Restructure layers and clean up deps

package.json

@@ -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"
   },

src/app.jsx

@@ -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 = {

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>
-	}
-}

src/layers/background.jsx

@@ -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>
+	}
+}
+

src/layers/editor.jsx

@@ -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>
+	}
+}
+

src/layers/fill.jsx

@@ -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>
+	}
+}

src/layers/line.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default class LineLayer extends React.Component {
+	render() {
+		return <div></div>
+	}
+}

src/layers/list.jsx

@@ -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>
+	}
+}

src/layers/symbol.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default class SymbolLayer extends React.Component {
+	render() {
+		return <div></div>
+	}
+}

src/workspace.jsx

@@ -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')}
 			/>