Added new features text-writing-mode and *-sort-key

src/components/fields/SpecField.jsx

@@ -11,6 +11,7 @@ import ArrayInput from '../inputs/ArrayInput'
 import DynamicArrayInput from '../inputs/DynamicArrayInput'
 import FontInput from '../inputs/FontInput'
 import IconInput from '../inputs/IconInput'
+import EnumInput from '../inputs/SelectInput'
 import capitalize from 'lodash.capitalize'
 
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
@@ -70,17 +71,10 @@ export default class SpecField extends React.Component {
         case 'enum':
           const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
 
-          if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+          return <EnumInput
-            return <MultiButtonInput
             {...commonProps}
             options={options}
           />
-          } else {
-            return <SelectInput
-              {...commonProps}
-              options={options}
-            />
-          }
         case 'formatted':
         case 'string':
           if(iconProperties.indexOf(this.props.fieldName) >= 0) {
@@ -119,6 +113,7 @@ export default class SpecField extends React.Component {
             } else {
               return <DynamicArrayInput
                 {...commonProps}
+                fieldSpec={this.props.fieldSpec}
                 type={this.props.fieldSpec.value}
               />
             }

src/components/inputs/DynamicArrayInput.jsx

@@ -5,6 +5,8 @@ import NumberInput from './NumberInput'
 import Button from '../Button'
 import {MdDelete} from 'react-icons/md'
 import DocLabel from '../fields/DocLabel'
+import EnumInput from '../inputs/SelectInput'
+import capitalize from 'lodash.capitalize'
 
 
 class DynamicArrayInput extends React.Component {
@@ -31,6 +33,11 @@ class DynamicArrayInput extends React.Component {
     const values = this.values.slice(0)
     if (this.props.type === 'number') {
       values.push(0)
+    }
+    else if (this.props.type === 'enum') {
+      const {fieldSpec} = this.props;
+      const defaultValue = Object.keys(fieldSpec.values)[0];
+      values.push(defaultValue);
     } else {
       values.push("")
     }
@@ -48,15 +55,28 @@ class DynamicArrayInput extends React.Component {
   render() {
     const inputs = this.values.map((v, i) => {
       const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
-      const input = this.props.type === 'number' 
+      let input;
-        ? <NumberInput
+      if (this.props.type === 'number') {
+        input = <NumberInput
           value={v}
           onChange={this.changeValue.bind(this, i)}
         />
-        : <StringInput
+      }
+      else if (this.props.type === 'enum') {
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
+
+        input = <EnumInput
+          options={options}
           value={v}
           onChange={this.changeValue.bind(this, i)}
         />
+      }
+      else {
+        input = <StringInput
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+      }
 
       return <div
         style={this.props.style}

src/components/inputs/EnumInput.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import SelectInput from '../inputs/SelectInput'
+import MultiButtonInput from '../inputs/MultiButtonInput'
+
+
+function optionsLabelLength(options) {
+  let sum = 0;
+  options.forEach(([_, label]) => {
+    sum += label.length
+  })
+  return sum
+}
+
+
+class EnumInput extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array,
+  }
+
+  render() {
+    const {options, value, onChange} = this.props;
+
+    if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+      return <MultiButtonInput
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+    } else {
+      return <SelectInput
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+    }
+  }
+}
+
+export default StringInput

src/config/layout.json

@@ -24,7 +24,8 @@
             "line-cap",
             "line-join",
             "line-miter-limit",
-            "line-round-limit"
+            "line-round-limit",
+            "line-sort-key"
           ]
         }
       ]
@@ -56,6 +57,13 @@
             "fill-translate",
             "fill-translate-anchor"
           ]
+        },
+        {
+          "title": "Layout properties",
+          "type": "properties",
+          "fields": [
+            "fill-sort-key"
+          ]
         }
       ]
     },
@@ -93,7 +101,8 @@
             "circle-pitch-scale",
             "circle-translate",
             "circle-translate-anchor",
-            "circle-pitch-alignment"
+            "circle-pitch-alignment",
+            "circle-sort-key"
           ]
         }
       ]
@@ -107,7 +116,8 @@
             "symbol-placement",
             "symbol-spacing",
             "symbol-avoid-edges",
-            "symbol-z-order"
+            "symbol-z-order",
+            "symbol-sort-key"
           ]
         },
         {
@@ -128,6 +138,7 @@
             "text-justify",
             "text-anchor",
             "text-max-angle",
+            "text-writing-mode",
             "text-rotate",
             "text-keep-upright",
             "text-transform",