Merge pull request #556 from orangemug/feature/add-new-mgljs-features

Added new features from the mapbox-gl spec

src/components/App.jsx

@@ -645,6 +645,7 @@ export default class App extends React.Component {
     />
 
     const layerEditor = selectedLayer ? <LayerEditor
+      key={selectedLayer.id}
       layer={selectedLayer}
       layerIndex={this.state.selectedLayerIndex}
       isFirstLayer={this.state.selectedLayerIndex < 1}

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 <MultiButtonInput
-              {...commonProps}
-              options={options}
-            />
-          } else {
-            return <SelectInput
-              {...commonProps}
-              options={options}
-            />
-          }
+          return <EnumInput
+            {...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 {
@@ -14,6 +16,7 @@ class DynamicArrayInput extends React.Component {
     default: PropTypes.array,
     onChange: PropTypes.func,
     style: PropTypes.object,
+    fieldSpec: PropTypes.object,
   }
 
   changeValue(idx, newValue) {
@@ -31,6 +34,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 +56,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' 
-        ? <NumberInput
+      let input;
+      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/components/inputs/NumberInput.jsx

@@ -24,11 +24,14 @@ class NumberInput extends React.Component {
         value: props.value
       };
     }
+    return {};
   }
 
   changeValue(newValue) {
     this.setState({editing: true});
-    const value = parseFloat(newValue)
+    const value = (newValue === "" || newValue === undefined) ?
+      undefined :
+      parseFloat(newValue);
 
     const hasChanged = this.state.value !== value
     if(this.isValid(value) && hasChanged) {
@@ -38,6 +41,10 @@ class NumberInput extends React.Component {
   }
 
   isValid(v) {
+    if (v === undefined) {
+      return true;
+    }
+
     const value = parseFloat(v)
     if(isNaN(value)) {
       return false
@@ -76,7 +83,7 @@ class NumberInput extends React.Component {
       spellCheck="false"
       className="maputnik-number"
       placeholder={this.props.default}
-      value={this.state.value}
+      value={this.state.value || ""}
       onChange={e => this.changeValue(e.target.value)}
       onBlur={this.resetValue}
     />

src/config/layout.json

@@ -128,11 +128,14 @@
             "text-justify",
             "text-anchor",
             "text-max-angle",
+            "text-writing-mode",
             "text-rotate",
             "text-keep-upright",
             "text-transform",
             "text-offset",
-            "text-optional"
+            "text-optional",
+            "text-variable-anchor",
+            "text-radial-offset"
           ]
         },
         {