Define source and layer settings in layout.json

src/components/fields/PropertyGroup.jsx

@@ -35,6 +35,7 @@ export default class PropertyGroup extends React.Component {
   }
 
   render() {
+    console.log(this.props.layer.id, this.props.groupFields)
     const fields = this.props.groupFields.map(fieldName => {
       const fieldSpec = getFieldSpec(this.props.layer.type, fieldName)
 

src/components/layers/LayerEditor.jsx

@@ -42,8 +42,6 @@ export default class LayerEditor extends React.Component {
     layout[this.props.layer.type].groups.forEach(group => {
       editorGroups[group.title] = true
     })
-    editorGroups['Source'] = true
-    editorGroups['Settings'] = true
 
     this.state = { editorGroups }
   }
@@ -103,32 +101,13 @@ export default class LayerEditor extends React.Component {
     })
   }
 
-  render() {
-    console.log('editor groups', this.state.editorGroups)
-    const layerType = this.props.layer.type
-    const groups = layout[layerType].groups
-    const propertyGroups = groups.map(group => {
-      return <LayerEditorGroup
-        key={group.title}
-        title={group.title}
-        isActive={this.state.editorGroups[group.title]}
-        onActiveToggle={this.onGroupToggle.bind(this, group.title)}
-      >
-        <PropertyGroup
-          layer={this.props.layer}
-          groupFields={group.fields}
-          onChange={this.onPropertyChange.bind(this)}
-        />
-      </LayerEditorGroup>
-    })
-
-    let dataGroup = null
-    if(this.props.layer.type !== 'background') {
-      dataGroup = <LayerEditorGroup
-        title="Source"
-        isActive={this.state.editorGroups['Source']}
-        onActiveToggle={this.onGroupToggle.bind(this, 'Source')}
-      >
+  renderGroupType(type, fields) {
+    switch(type) {
+      case 'settings': return <LayerSettings
+        id={this.props.layer.id}
+        type={this.props.layer.type}
+      />
+      case 'source': return <div>
         <FilterEditor
           filter={this.props.layer.filter}
           properties={this.props.vectorLayers[this.props.layer['source-layer']]}
@@ -141,24 +120,34 @@ export default class LayerEditor extends React.Component {
           onSourceChange={console.log}
           onSourceLayerChange={console.log}
         />
-      </LayerEditorGroup>
-    }
-
-    const settingsGroup = <LayerEditorGroup
-      title="Settings"
-      isActive={this.state.editorGroups['Settings']}
-      onActiveToggle={this.onGroupToggle.bind(this, 'Settings')}
-    >
-      <LayerSettings
-        id={this.props.layer.id}
-        type={this.props.layer.type}
+      </div>
+      case 'properties': return <PropertyGroup
+        layer={this.props.layer}
+        groupFields={fields}
+        onChange={this.onPropertyChange.bind(this)}
       />
-    </LayerEditorGroup>
+      default: return null
+    }
+  }
+
+  render() {
+    console.log('editor groups', this.state.editorGroups)
+    const layerType = this.props.layer.type
+    const layoutGroups = layout[layerType].groups.filter(group => {
+      return !(this.props.layer.type === 'background' && group.type === 'source')
+    }).map(group => {
+      return <LayerEditorGroup
+        key={group.title}
+        title={group.title}
+        isActive={this.state.editorGroups[group.title]}
+        onActiveToggle={this.onGroupToggle.bind(this, group.title)}
+      >
+        {this.renderGroupType(group.type, group.fields)}
+      </LayerEditorGroup>
+    })
 
     return <div>
-      {settingsGroup}
-      {dataGroup}
-      {propertyGroups}
+      {layoutGroups}
     </div>
   }
 }

src/config/layout.json

@@ -1,8 +1,17 @@
 {
     "line": {
       "groups": [
+        {
+          "title": "Settings",
+          "type": "settings"
+        },
+        {
+          "title": "Source",
+          "type": "source"
+        },
         {
           "title": "Paint",
+          "type": "properties",
           "fields": [
             "line-opacity",
             "line-color",
@@ -14,6 +23,7 @@
         },
         {
           "title": "Secondary",
+          "type": "properties",
           "fields": [
             "line-translate",
             "line-translate-anchor",
@@ -30,7 +40,16 @@
     "background": {
       "groups": [
         {
-          "title": "primary",
+          "title": "Settings",
+          "type": "settings"
+        },
+        {
+          "title": "Source",
+          "type": "source"
+        },
+        {
+          "title": "Basic",
+          "type": "properties",
           "fields": [
             "background-color",
             "background-pattern",
@@ -42,7 +61,16 @@
     "fill": {
       "groups": [
         {
-          "title": "primary",
+          "title": "Settings",
+          "type": "settings"
+        },
+        {
+          "title": "Source",
+          "type": "source"
+        },
+        {
+          "title": "Basic",
+          "type": "properties",
           "fields": [
             "fill-opacity",
             "fill-color",
@@ -58,7 +86,16 @@
     "symbol": {
       "groups": [
         {
-          "title": "primary",
+          "title": "Settings",
+          "type": "settings"
+        },
+        {
+          "title": "Source",
+          "type": "source"
+        },
+        {
+          "title": "Basic",
+          "type": "properties",
           "fields": [
             "text-field",
             "text-font",
@@ -67,7 +104,8 @@
           ]
         },
         {
-          "title": "placement",
+          "title": "Placement",
+          "type": "properties",
           "fields": [
             "symbol-placement",
             "symbol-spacing",
@@ -78,7 +116,8 @@
           ]
         },
         {
-          "title": "layout",
+          "title": "Layout",
+          "type": "properties",
           "fields": [
             "text-pitch-alignment",
             "text-rotation-alignment",
@@ -95,7 +134,8 @@
           ]
         },
         {
-          "title": "icon",
+          "title": "Icon",
+          "type": "properties",
           "fields": [
             "icon-allow-overlap",
             "icon-ignore-placement",