also the API has changed, see comment in file
-import '../../vendor/codemirror/addon/lint/json-lint'
+import stringifyPretty from 'json-stringify-pretty-compact'
+import '../util/codemirror-mgl';
class JSONEditor extends React.Component {
static propTypes = {
- layer: PropTypes.object.isRequired,
+ layer: PropTypes.any.isRequired,
maxHeight: PropTypes.number,
onChange: PropTypes.func,
+ lineNumbers: PropTypes.bool,
+ lineWrapping: PropTypes.bool,
+ getValue: PropTypes.func,
+ gutters: PropTypes.array,
+ className: PropTypes.string,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+ onJSONValid: PropTypes.func,
+ onJSONInvalid: PropTypes.func,
+ mode: PropTypes.object,
+ lint: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.object,
+ ]),
+ }
+
+ static defaultProps = {
+ lineNumbers: true,
+ lineWrapping: false,
+ gutters: ["CodeMirror-lint-markers"],
+ getValue: (data) => {
+ return stringifyPretty(data, {indent: 2, maxLength: 40});
+ },
+ onFocus: () => {},
+ onBlur: () => {},
+ onJSONInvalid: () => {},
+ onJSONValid: () => {},
}
constructor(props) {
super(props)
this.state = {
isEditing: false,
- prevValue: this.getValue(),
+ prevValue: this.props.getValue(this.props.layer),
};
}
- getValue () {
- return JSON.stringify(this.props.layer, null, 2);
- }
-
componentDidMount () {
this._doc = CodeMirror(this._el, {
- value: this.getValue(),
- mode: {
- name: "javascript",
- json: true
+ value: this.props.getValue(this.props.layer),
+ mode: this.props.mode || {
+ name: "mgl",
},
+ lineWrapping: this.props.lineWrapping,
tabSize: 2,
theme: 'maputnik',
viewportMargin: Infinity,
- lineNumbers: true,
- lint: true,
+ lineNumbers: this.props.lineNumbers,
+ lint: this.props.lint || {
+ context: "layer"
+ },
matchBrackets: true,
- gutters: ["CodeMirror-lint-markers"],
+ gutters: this.props.gutters,
scrollbarStyle: "null",
});
@@ -58,12 +83,14 @@ class JSONEditor extends React.Component {
}
onFocus = () => {
+ this.props.onFocus();
this.setState({
isEditing: true
});
}
onBlur = () => {
+ this.props.onBlur();
this.setState({
isEditing: false
});
@@ -79,7 +106,7 @@ class JSONEditor extends React.Component {
if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
this._cancelNextChange = true;
this._doc.setValue(
- this.getValue(),
+ this.props.getValue(this.props.layer),
)
}
}
@@ -87,16 +114,28 @@ class JSONEditor extends React.Component {
onChange = (e) => {
if (this._cancelNextChange) {
this._cancelNextChange = false;
+ this.setState({
+ prevValue: this._doc.getValue(),
+ })
return;
}
const newCode = this._doc.getValue();
if (this.state.prevValue !== newCode) {
+ let parsedLayer, err;
try {
- const parsedLayer = JSON.parse(newCode)
+ parsedLayer = JSON.parse(newCode);
+ } catch(_err) {
+ err = _err;
+ console.warn(_err)
+ }
+
+ if (err) {
+ this.props.onJSONInvalid();
+ }
+ else {
this.props.onChange(parsedLayer)
- } catch(err) {
- console.warn(err)
+ this.props.onJSONValid();
}
}
@@ -112,7 +151,7 @@ class JSONEditor extends React.Component {
}
return
this._el = el}
style={style}
/>
diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index ed161163..79b4c161 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -20,6 +20,10 @@ import { changeType, changeProperty } from '../../libs/layer'
import layout from '../../config/layout.json'
+function getLayoutForType (type) {
+ return layout[type] ? layout[type] : layout.invalid;
+}
+
function layoutGroups(layerType) {
const layerGroup = {
title: 'Layer',
@@ -33,7 +37,9 @@ function layoutGroups(layerType) {
title: 'JSON Editor',
type: 'jsoneditor'
}
- return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
+ return [layerGroup, filterGroup]
+ .concat(getLayoutForType(layerType).groups)
+ .concat([editorGroup])
}
/** Layer editor supporting multiple types of layers. */
@@ -52,6 +58,7 @@ export default class LayerEditor extends React.Component {
isFirstLayer: PropTypes.bool,
isLastLayer: PropTypes.bool,
layerIndex: PropTypes.number,
+ errors: PropTypes.array,
}
static defaultProps = {
@@ -79,7 +86,7 @@ export default class LayerEditor extends React.Component {
static getDerivedStateFromProps(props, state) {
const additionalGroups = { ...state.editorGroups }
- layout[props.layer.type].groups.forEach(group => {
+ getLayoutForType(props.layer.type).groups.forEach(group => {
if(!(group.title in additionalGroups)) {
additionalGroups[group.title] = true
}
@@ -118,6 +125,20 @@ export default class LayerEditor extends React.Component {
if(this.props.layer.metadata) {
comment = this.props.layer.metadata['maputnik:comment']
}
+ const {errors, layerIndex} = this.props;
+
+ const errorData = {};
+ errors.forEach(error => {
+ if (
+ error.parsed &&
+ error.parsed.type === "layer" &&
+ error.parsed.data.index == layerIndex
+ ) {
+ errorData[error.parsed.data.key] = {
+ message: error.parsed.data.message
+ };
+ }
+ })
let sourceLayerIds;
if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
@@ -129,13 +150,17 @@ export default class LayerEditor extends React.Component {
this.props.onLayerIdChange(this.props.layer.id, newId)}
/>
this.props.onLayerChanged(changeType(this.props.layer, newType))}
/>
{this.props.layer.type !== 'background' && this.changeProperty(null, 'source', v)}
@@ -143,20 +168,24 @@ export default class LayerEditor extends React.Component {
}
{['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
this.changeProperty(null, 'source-layer', v)}
/>
}
this.changeProperty(null, 'minzoom', v)}
/>
this.changeProperty(null, 'maxzoom', v)}
/>
this.changeProperty('metadata', 'maputnik:comment', v == "" ? undefined : v)}
/>
@@ -164,6 +193,7 @@ export default class LayerEditor extends React.Component {
case 'filter': return
this.changeProperty(null, 'filter', f)}
@@ -171,6 +201,7 @@ export default class LayerEditor extends React.Component {
case 'properties': return {
const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+ const layerError = this.props.errors.find(error => {
+ return (
+ error.parsed &&
+ error.parsed.type === "layer" &&
+ error.parsed.data.index == idx
+ );
+ });
+
const listItem = 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
- 'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
+ 'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
+ 'maputnik-layer-list-item--error': !!layerError
})}
index={idx}
key={layer.id}
diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx
index 6e29c25c..1c685986 100644
--- a/src/components/layers/LayerTypeBlock.jsx
+++ b/src/components/layers/LayerTypeBlock.jsx
@@ -4,33 +4,49 @@ import PropTypes from 'prop-types'
import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import SelectInput from '../inputs/SelectInput'
+import StringInput from '../inputs/StringInput'
class LayerTypeBlock extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
wdKey: PropTypes.string,
onChange: PropTypes.func.isRequired,
+ error: PropTypes.object,
+ disabled: PropTypes.bool,
+ }
+
+ static defaultProps = {
+ disabled: false,
}
render() {
return
-
+ {this.props.disabled &&
+
+ }
+ {!this.props.disabled &&
+
+ }
}
}
diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx
index d05ac76f..ee75f42f 100644
--- a/src/components/layers/MaxZoomBlock.jsx
+++ b/src/components/layers/MaxZoomBlock.jsx
@@ -9,10 +9,12 @@ class MaxZoomBlock extends React.Component {
static propTypes = {
value: PropTypes.number,
onChange: PropTypes.func.isRequired,
+ error: PropTypes.object,
}
render() {
return
0) {
+ // JSON invalid so don't go any further
+ return found;
+ }
+
+ const ast = jsonToAst(text);
+ const input = JSON.parse(text);
+
+ function getArrayPositionalFromAst (node, path) {
+ if (!node) {
+ return undefined;
+ }
+ else if (path.length < 1) {
+ return node;
+ }
+ else if (!node.children) {
+ return undefined;
+ }
+ else {
+ const key = path[0];
+ let newNode;
+ if (key.match(/^[0-9]+$/)) {
+ newNode = node.children[path[0]];
+ }
+ else {
+ newNode = node.children.find(childNode => {
+ return (
+ childNode.key &&
+ childNode.key.type === "Identifier" &&
+ childNode.key.value === key
+ );
+ });
+ if (newNode) {
+ newNode = newNode.value;
+ }
+ }
+ return getArrayPositionalFromAst(newNode, path.slice(1))
+ }
+ }
+
+ let out;
+ if (context === "layer") {
+ // Just an empty style so we can validate a layer.
+ const errors = validate({
+ "version": 8,
+ "name": "Empty Style",
+ "metadata": {},
+ "sources": {},
+ "sprite": "",
+ "glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
+ "layers": [
+ input
+ ]
+ });
+
+ if (errors) {
+ out = {
+ result: "error",
+ value: errors
+ .filter(err => {
+ // Remove missing 'layer source' errors, because we don't include them
+ if (err.message.match(/^layers\[0\]: source ".*" not found$/)) {
+ return false;
+ }
+ else {
+ return true;
+ }
+ })
+ .map(err => {
+ // Remove the 'layers[0].' as we're validating the layer only here
+ const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
+ return {
+ key: errMessageParts[0],
+ message: errMessageParts[1],
+ };
+ })
+ }
+ }
+ }
+ else if (context === "expression") {
+ out = expression.createExpression(input, opts.spec);
+ }
+ else {
+ throw new Error(`Invalid context ${context}`);
+ }
+
+ if (out.result === "error") {
+ const errors = out.value;
+ errors.forEach(error => {
+ const {key, message} = error;
+
+ if (!key) {
+ const lastLineHandle = doc.getLineHandle(doc.lastLine());
+ const err = {
+ from: CodeMirror.Pos(doc.firstLine(), 0),
+ to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
+ message: message,
+ }
+ found.push(err);
+ }
+ else if (key) {
+ const path = key.replace(/^\[|\]$/g, "").split(/\.|[\[\]]+/).filter(Boolean)
+ const parsedError = getArrayPositionalFromAst(ast, path);
+ if (!parsedError) {
+ console.warn("Something went wrong parsing error:", error);
+ return;
+ }
+
+ const {loc} = parsedError;
+ const {start, end} = loc;
+
+ found.push({
+ from: CodeMirror.Pos(start.line - 1, start.column),
+ to: CodeMirror.Pos(end.line - 1, end.column),
+ message: message,
+ });
+ }
+ })
+ }
+
+ return found;
+});
diff --git a/src/config/layout.json b/src/config/layout.json
index 7d23808a..7b3321d0 100644
--- a/src/config/layout.json
+++ b/src/config/layout.json
@@ -233,5 +233,8 @@
]
}
]
+ },
+ "invalid": {
+ "groups": []
}
}
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 8a6ce103..eedefb50 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -146,7 +146,7 @@
.maputnik-icon-button {
background-color: transparent;
- &:hover {
+ &:hover:not(:disabled) {
background-color: transparent;
label,
@@ -182,18 +182,26 @@
.maputnik-action-block {
.maputnik-input-block-label {
display: inline-block;
- width: 35%;
+ width: 32%;
}
.maputnik-input-block-action {
vertical-align: top;
display: inline-block;
- width: 15%;
+ width: 18%;
}
.maputnik-input-block-action > div {
text-align: right;
}
+
+}
+
+.maputnik-data-spec-block,
+.maputnik-zoom-spec-property {
+ .maputnik-inline-error {
+ margin-left: 32%;
+ }
}
// SPACE HELPER
@@ -208,6 +216,12 @@
&-error {
color: $color-red;
}
+
+ &__switch-button {
+ all: unset;
+ text-decoration: underline;
+ cursor: pointer;
+ }
}
.maputnik-dialog {
@@ -238,3 +252,51 @@
}
}
}
+
+.maputnik-inline-error {
+ color: #a4a4a4;
+ padding: 0.4em 0.4em;
+ font-size: 0.9em;
+ border: solid 1px $color-red;
+ border-radius: 2px;
+ margin: $margin-2 0px;
+}
+
+.maputnik-expression-editor {
+ border: solid 1px $color-gray;
+}
+
+.maputnik-input-block--wide {
+ .maputnik-input-block-content {
+ display: block;
+ width: auto;
+ }
+
+ .maputnik-input-block-label {
+ width: 82%;
+ }
+
+ .maputnik-input-block-action {
+ text-align: right;
+ }
+}
+
+.maputnik-expr-infobox {
+ font-size: $font-size-6;
+ background: $color-midgray;
+ padding: $margin-2;
+ border-radius: 2px;
+ border-top-right-radius: 0px;
+ border-top-left-radius: 0px;
+ color: $color-white;
+}
+
+.maputnik-expr-infobox__button {
+ background: none;
+ border: none;
+ padding: 0;
+ text-decoration: underline;
+ color: currentColor;
+ cursor: pointer;
+}
+
diff --git a/src/styles/_filtereditor.scss b/src/styles/_filtereditor.scss
index 7c3d1542..d836be9e 100644
--- a/src/styles/_filtereditor.scss
+++ b/src/styles/_filtereditor.scss
@@ -1,5 +1,10 @@
.maputnik-filter-editor-wrapper {
padding: $margin-3;
+ overflow: hidden;
+
+ .maputnik-input-block {
+ margin: 0;
+ }
}
.maputnik-filter-editor {
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 03aa4ea3..b9a48ec7 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -25,6 +25,11 @@
resize: vertical;
height: 78px;
}
+
+ &--disabled {
+ background: transparent;
+ border: none;
+ }
}
.maputnik-number-container {
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index e933da4f..1648bd44 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -99,6 +99,11 @@
}
}
+
+ .maputnik-layer-list-item--error {
+ color: $color-red;
+ }
+
&-item-selected {
color: $color-white;
}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index f3db7eb1..b18dfa20 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -38,7 +38,6 @@
&-bottom {
position: fixed;
- height: 50px;
bottom: 0;
right: 0;
z-index: 1;
diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index 2b9ce14b..38e26c55 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -2,9 +2,8 @@
.maputnik-make-zoom-function {
background-color: transparent;
display: inline-block;
- padding-bottom: 0;
- padding-top: 0;
vertical-align: middle;
+ padding: 0 $margin-2 0 0;
@extend .maputnik-icon-button;
}
@@ -63,9 +62,8 @@
.maputnik-make-data-function {
background-color: transparent;
display: inline-block;
- padding-bottom: 0;
- padding-top: 0;
vertical-align: middle;
+ padding: 0 $margin-2 0 0;
@extend .maputnik-icon-button;
}
@@ -98,10 +96,6 @@
.maputnik-data-spec-property-input {
width: 75%;
display: inline-block;
-
- .maputnik-string {
- margin-bottom: 3%;
- }
}
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 759b73cf..11cca10a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -34,3 +34,4 @@
width: 14px;
height: 14px;
}
+
diff --git a/src/vendor/codemirror/addon/lint/json-lint.js b/src/vendor/codemirror/addon/lint/json-lint.js
deleted file mode 100644
index 5c80a840..00000000
--- a/src/vendor/codemirror/addon/lint/json-lint.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-// Depends on fork of jsonlint from
-// becuase of
-var jsonlint = require("jsonlint");
-var CodeMirror = require("codemirror");
-
-CodeMirror.registerHelper("lint", "json", function(text) {
- var found = [];
-
- // NOTE: This was modified from the original to remove the global, also the
- // old jsonlint API was 'jsonlint.parseError' its now
- // 'jsonlint.parser.parseError'
- jsonlint.parser.parseError = function(str, hash) {
- var loc = hash.loc;
- found.push({
- from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
- to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
- message: str
- });
- };
-
- try {
- jsonlint.parse(text);
- }
- catch(e) {
- // Do nothing we catch the error above
- }
- return found;
-});