Improve grouping

src/components/layers/LayerEditor.jsx

@@ -25,6 +25,22 @@ class UnsupportedLayer extends React.Component {
   }
 }
 
+function layoutGroups(layerType) {
+  const layerGroup = {
+    title: 'Layer',
+    type: 'layer'
+  }
+  const filterGroup = {
+    title: 'Filter',
+    type: 'filter'
+  }
+  const editorGroup = {
+    title: 'JSON Editor',
+    type: 'jsoneditor'
+  }
+    return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
+}
+
 /** Layer editor supporting multiple types of layers. */
 export default class LayerEditor extends React.Component {
   static propTypes = {
@@ -50,7 +66,7 @@ export default class LayerEditor extends React.Component {
 
     //TODO: Clean this up and refactor into function
     const editorGroups = {}
-    layout[this.props.layer.type].groups.forEach(group => {
+    layoutGroups(this.props.layer.type).forEach(group => {
       editorGroups[group.title] = true
     })
 
@@ -96,17 +112,15 @@ export default class LayerEditor extends React.Component {
 
   renderGroupType(type, fields) {
     switch(type) {
-      case 'settings': return <div>
+      case 'layer': return <div>
-          <LayerIdBlock
+        <LayerIdBlock
-            value={this.props.layer.id}
+          value={this.props.layer.id}
-            onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
+          onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
-          />
+        />
-          <LayerTypeBlock
+        <LayerTypeBlock
-            value={this.props.layer.type}
+          value={this.props.layer.type}
-            onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
+          onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
-          />
+        />
-        </div>
-      case 'source': return <div>
         <LayerSourceBlock
           sourceIds={Object.keys(this.props.sources)}
           value={this.props.layer.source}
@@ -118,6 +132,8 @@ export default class LayerEditor extends React.Component {
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
+      </div>
+      case 'filter': return <div>
         <div style={input.property}>
           <FilterEditor
             filter={this.props.layer.filter}
@@ -141,8 +157,8 @@ export default class LayerEditor extends React.Component {
 
   render() {
     const layerType = this.props.layer.type
-    const layoutGroups = layout[layerType].groups.filter(group => {
+    const groups = layoutGroups(layerType).filter(group => {
-      return !(this.props.layer.type === 'background' && group.type === 'source')
+      return !(layerType === 'background' && group.type === 'source')
     }).map(group => {
       return <LayerEditorGroup
         key={group.title}
@@ -155,7 +171,7 @@ export default class LayerEditor extends React.Component {
     })
 
     return <div>
-      {layoutGroups}
+      {groups}
     </div>
   }
 }

src/components/layers/LayerIdBlock.jsx

@@ -11,7 +11,7 @@ class LayerIdBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Layer ID"} doc={GlSpec.layer.id.doc}>
+    return <InputBlock label={"ID"} doc={GlSpec.layer.id.doc}>
       <StringInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/layers/LayerTypeBlock.jsx

@@ -11,7 +11,7 @@ class LayerTypeBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Layer Type"} doc={GlSpec.layer.type.doc}>
+    return <InputBlock label={"Type"} doc={GlSpec.layer.type.doc}>
       <SelectInput
         options={[
           ['background', 'Background'],

src/config/layout.json

@@ -1,14 +1,6 @@
 {
     "line": {
       "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
         {
           "title": "Paint",
           "type": "properties",
@@ -34,23 +26,11 @@
             "line-dasharray",
             "line-gap-width"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "background": {
       "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
         {
           "title": "Basic",
           "type": "properties",
@@ -59,23 +39,11 @@
             "background-pattern",
             "background-opacity"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "fill": {
       "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
         {
           "title": "Basic",
           "type": "properties",
@@ -88,23 +56,11 @@
             "fill-translate",
             "fill-translate-anchor"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "fill-extrusion": {
       "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
         {
           "title": "Basic",
           "type": "properties",
@@ -117,23 +73,11 @@
             "fill-extrusion-height",
             "fill-extrusion-base"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "circle": {
       "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
         {
           "title": "Basic",
           "type": "properties",
@@ -161,23 +105,11 @@
             "circle-translate",
             "circle-translate-anchor"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "symbol": {
       "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
         {
           "title": "Basic",
           "type": "properties",
@@ -241,23 +173,11 @@
             "icon-keep-upright",
             "icon-offset"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "raster": {
       "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
         {
           "title": "Basic",
           "type": "properties",
@@ -270,10 +190,6 @@
             "raster-contrast",
             "raster-fade-duration"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     }