From 4f19f6a08cb2192516c53ce58f088896da286114 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 17 May 2018 10:44:54 +0100 Subject: [PATCH 1/4] Added support for encoding to raster-dem source, enabling terrarium tiles. --- package-lock.json | 129 ++++-------------- package.json | 2 +- src/components/App.jsx | 2 +- src/components/filter/FilterEditor.jsx | 2 +- src/components/layers/LayerIdBlock.jsx | 2 +- src/components/layers/LayerSourceBlock.jsx | 2 +- .../layers/LayerSourceLayerBlock.jsx | 2 +- src/components/layers/LayerTypeBlock.jsx | 2 +- src/components/layers/MaxZoomBlock.jsx | 2 +- src/components/layers/MinZoomBlock.jsx | 2 +- src/components/modals/ExportModal.jsx | 2 +- src/components/modals/SettingsModal.jsx | 2 +- src/components/modals/SourcesModal.jsx | 2 +- src/components/sources/SourceTypeEditor.jsx | 102 +++++++++++++- src/libs/diffmessage.js | 2 +- src/libs/filterops.js | 2 +- src/libs/layer.js | 2 +- 17 files changed, 139 insertions(+), 122 deletions(-) diff --git a/package-lock.json b/package-lock.json index 93ad129..4ee62e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -297,31 +297,16 @@ "integrity": "sha512-x5xSHNAD5MeuasbEpGyDBGy4zPQysDdvDUlnjDKMxic8KqmcxcCP3ojlIaqEWYFvMmq7FKyWIF7K8jO4bHavKQ==" }, "@mapbox/mapbox-gl-style-spec": { - "version": "11.1.1", - "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-11.1.1.tgz", - "integrity": "sha512-4l/q05NO26u2HmkjIKpFsMs2Ed56wd+w9nC8pXAVVsBZBG+LHwynJZyg6Ijy/6gLyp+nnmLFtzkXFfneuFCIjw==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-12.0.0.tgz", + "integrity": "sha1-dRW/rbs6hZ66HFbZn8E4P6YpJ0c=", "requires": { + "@mapbox/jsonlint-lines-primitives": "2.0.1", "@mapbox/unitbezier": "0.0.0", - "brfs": "1.6.1", - "bubleify": "0.7.0", "csscolorparser": "1.0.3", - "in-publish": "2.0.0", - "jsonlint-lines-primitives": "1.6.0", "minimist": "0.0.8", "rw": "1.3.3", - "sort-object": "0.3.2", - "unflowify": "1.0.1" - }, - "dependencies": { - "jsonlint-lines-primitives": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/jsonlint-lines-primitives/-/jsonlint-lines-primitives-1.6.0.tgz", - "integrity": "sha1-u4n2DIubYS/ZE92qI2ZJuEDYZhE=", - "requires": { - "JSV": "4.0.2", - "nomnom": "1.8.1" - } - } + "sort-object": "0.3.2" } }, "@mapbox/mapbox-gl-supported": { @@ -418,6 +403,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz", "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=", + "dev": true, "requires": { "acorn": "3.3.0" }, @@ -425,22 +411,8 @@ "acorn": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", - "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=" - } - } - }, - "acorn-object-spread": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz", - "integrity": "sha1-SOrQ9KjrFplaF6Dbn/xqyq2kumg=", - "requires": { - "acorn": "3.3.0" - }, - "dependencies": { - "acorn": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", - "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=" + "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=", + "dev": true } } }, @@ -524,12 +496,14 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true }, "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true }, "ansicolors": { "version": "0.2.1", @@ -2128,7 +2102,8 @@ "babylon": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", - "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" + "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", + "dev": true }, "backo2": { "version": "1.0.2", @@ -2467,49 +2442,6 @@ "electron-to-chromium": "1.3.36" } }, - "buble": { - "version": "0.15.2", - "resolved": "https://registry.npmjs.org/buble/-/buble-0.15.2.tgz", - "integrity": "sha1-VH/EdIP45egXbYKqXrzLGDsC1hM=", - "requires": { - "acorn": "3.3.0", - "acorn-jsx": "3.0.1", - "acorn-object-spread": "1.0.0", - "chalk": "1.1.3", - "magic-string": "0.14.0", - "minimist": "1.2.0", - "os-homedir": "1.0.2" - }, - "dependencies": { - "acorn": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", - "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=" - }, - "magic-string": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.14.0.tgz", - "integrity": "sha1-VyJK7xcByu7Sc7F6OalW5ysXJGI=", - "requires": { - "vlq": "0.2.3" - } - }, - "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" - } - } - }, - "bubleify": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/bubleify/-/bubleify-0.7.0.tgz", - "integrity": "sha1-0I6mQv/Qhf+HEciEP1cHLw1euPY=", - "requires": { - "buble": "0.15.2", - "object-assign": "4.1.1" - } - }, "buffer": { "version": "4.9.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", @@ -2751,6 +2683,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, "requires": { "ansi-styles": "2.2.1", "escape-string-regexp": "1.0.5", @@ -4491,7 +4424,8 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true }, "escodegen": { "version": "1.9.1", @@ -5579,15 +5513,6 @@ "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=", "dev": true }, - "flow-remove-types": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/flow-remove-types/-/flow-remove-types-1.2.3.tgz", - "integrity": "sha512-ypq/U3V+t9atYiOuSJd40tekCra03EHKoRsiK/wXGrsZimuum0kdwVY7Yv0HTaoXgHW1WiayomYd+Q3kkvPl9Q==", - "requires": { - "babylon": "6.18.0", - "vlq": "0.2.3" - } - }, "flush-write-stream": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.2.tgz", @@ -6857,6 +6782,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", + "dev": true, "requires": { "ansi-regex": "2.1.1" } @@ -7395,7 +7321,8 @@ "in-publish": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz", - "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=" + "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=", + "dev": true }, "indent-string": { "version": "2.1.0", @@ -10129,7 +10056,8 @@ "os-homedir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", - "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=" + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "dev": true }, "os-locale": { "version": "1.4.0", @@ -13625,6 +13553,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, "requires": { "ansi-regex": "2.1.1" } @@ -14202,7 +14131,8 @@ "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true }, "svg-tags": { "version": "1.0.0", @@ -14726,15 +14656,6 @@ "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz", "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=" }, - "unflowify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/unflowify/-/unflowify-1.0.1.tgz", - "integrity": "sha1-ouoNJcCv/MRpVeZHNXX3xaH0ppY=", - "requires": { - "flow-remove-types": "1.2.3", - "through": "2.3.8" - } - }, "unherit": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.0.tgz", diff --git a/package.json b/package.json index 5de85a2..e021ba7 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "homepage": "https://github.com/maputnik/editor#readme", "dependencies": { "@mapbox/mapbox-gl-rtl-text": "^0.1.2", - "@mapbox/mapbox-gl-style-spec": "^11.1.1", + "@mapbox/mapbox-gl-style-spec": "^12.0.0", "classnames": "^2.2.5", "codemirror": "^5.37.0", "color": "^3.0.0", diff --git a/src/components/App.jsx b/src/components/App.jsx index c985cc7..61b2ea7 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -10,7 +10,7 @@ import AppLayout from './AppLayout' import MessagePanel from './MessagePanel' import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import style from '../libs/style.js' import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen' import { undoMessages, redoMessages } from '../libs/diffmessage' diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index 02ee2a4..abbad2a 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { combiningFilterOps } from '../../libs/filterops.js' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import DocLabel from '../fields/DocLabel' import SelectInput from '../inputs/SelectInput' import SingleFilterEditor from './SingleFilterEditor' diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx index d12e9d3..cebb298 100644 --- a/src/components/layers/LayerIdBlock.jsx +++ b/src/components/layers/LayerIdBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx index 5fb4a03..3773f73 100644 --- a/src/components/layers/LayerSourceBlock.jsx +++ b/src/components/layers/LayerSourceBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import AutocompleteInput from '../inputs/AutocompleteInput' diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx index 950db55..804e93f 100644 --- a/src/components/layers/LayerSourceLayerBlock.jsx +++ b/src/components/layers/LayerSourceLayerBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import AutocompleteInput from '../inputs/AutocompleteInput' diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx index a579ee8..fce683d 100644 --- a/src/components/layers/LayerTypeBlock.jsx +++ b/src/components/layers/LayerTypeBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx index 98de68a..d025735 100644 --- a/src/components/layers/MaxZoomBlock.jsx +++ b/src/components/layers/MaxZoomBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index 4026a8c..6729f5b 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/src/components/layers/MinZoomBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index c897a49..e75391d 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { saveAs } from 'file-saver' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import CheckboxInput from '../inputs/CheckboxInput' diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 941a818..3f8790d 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index b5db455..c19a7b0 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/src/components/modals/SourcesModal.jsx @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import Modal from './Modal' import Button from '../Button' import InputBlock from '../inputs/InputBlock' diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index e415fea..403a980 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/src/components/sources/SourceTypeEditor.jsx @@ -1,9 +1,105 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import NumberInput from '../inputs/NumberInput' +import SelectInput from '../inputs/SelectInput' + +class DemJSONSourceEditor extends React.Component { + static propTypes = { + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + } + + render() { + return
+ + this.props.onChange({ + ...this.props.source, + url: url + })} + /> + + + this.props.onChange({ + ...this.props.source, + encoding: encoding + })} + value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default} + /> + +
+ } +} + +class DemURLSourceEditor extends React.Component { + static propTypes = { + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + } + + changeTileUrl(idx, value) { + const tiles = this.props.source.tiles.slice(0) + tiles[idx] = value + this.props.onChange({ + ...this.props.source, + tiles: tiles + }) + } + + renderTileUrls() { + const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'] + const tiles = this.props.source.tiles || [] + return tiles.map((tileUrl, tileIndex) => { + return + + + }) + } + + render() { + return
+ {this.renderTileUrls()} + + this.props.onChange({ + ...this.props.source, + minzoom: minzoom + })} + /> + + + this.props.onChange({ + ...this.props.source, + maxzoom: maxzoom + })} + /> + + + this.props.onChange({ + ...this.props.source, + encoding: encoding + })} + value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default} + /> + +
+ + } +} class TileJSONSourceEditor extends React.Component { static propTypes = { @@ -115,8 +211,8 @@ class SourceTypeEditor extends React.Component { case 'tilexyz_vector': return case 'tilejson_raster': return case 'tilexyz_raster': return - case 'tilejson_raster-dem': return - case 'tilexyz_raster-dem': return + case 'tilejson_raster-dem': return + case 'tilexyz_raster-dem': return default: return null } } diff --git a/src/libs/diffmessage.js b/src/libs/diffmessage.js index 6536c3a..1cb3266 100644 --- a/src/libs/diffmessage.js +++ b/src/libs/diffmessage.js @@ -1,4 +1,4 @@ -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' export function diffMessages(beforeStyle, afterStyle) { const changes = styleSpec.diff(beforeStyle, afterStyle) diff --git a/src/libs/filterops.js b/src/libs/filterops.js index 61613e8..156669c 100644 --- a/src/libs/filterops.js +++ b/src/libs/filterops.js @@ -1,4 +1,4 @@ -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' export const combiningFilterOps = ['all', 'any', 'none'] export const setFilterOps = ['in', '!in'] export const otherFilterOps = Object diff --git a/src/libs/layer.js b/src/libs/layer.js index 8f9832f..8e5edf3 100644 --- a/src/libs/layer.js +++ b/src/libs/layer.js @@ -1,4 +1,4 @@ -import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' export function changeType(layer, newType) { const changedPaintProps = { ...layer.paint } From 79b251d8b970245ce10693c57f22bc50d3ffb2f4 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 17 May 2018 10:55:55 +0100 Subject: [PATCH 2/4] DRY up the code. --- src/components/sources/SourceTypeEditor.jsx | 131 ++++---------------- 1 file changed, 26 insertions(+), 105 deletions(-) diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index 403a980..c55b46d 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/src/components/sources/SourceTypeEditor.jsx @@ -6,100 +6,6 @@ import StringInput from '../inputs/StringInput' import NumberInput from '../inputs/NumberInput' import SelectInput from '../inputs/SelectInput' -class DemJSONSourceEditor extends React.Component { - static propTypes = { - source: PropTypes.object.isRequired, - onChange: PropTypes.func.isRequired, - } - - render() { - return
- - this.props.onChange({ - ...this.props.source, - url: url - })} - /> - - - this.props.onChange({ - ...this.props.source, - encoding: encoding - })} - value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default} - /> - -
- } -} - -class DemURLSourceEditor extends React.Component { - static propTypes = { - source: PropTypes.object.isRequired, - onChange: PropTypes.func.isRequired, - } - - changeTileUrl(idx, value) { - const tiles = this.props.source.tiles.slice(0) - tiles[idx] = value - this.props.onChange({ - ...this.props.source, - tiles: tiles - }) - } - - renderTileUrls() { - const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'] - const tiles = this.props.source.tiles || [] - return tiles.map((tileUrl, tileIndex) => { - return - - - }) - } - - render() { - return
- {this.renderTileUrls()} - - this.props.onChange({ - ...this.props.source, - minzoom: minzoom - })} - /> - - - this.props.onChange({ - ...this.props.source, - maxzoom: maxzoom - })} - /> - - - this.props.onChange({ - ...this.props.source, - encoding: encoding - })} - value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default} - /> - -
- - } -} class TileJSONSourceEditor extends React.Component { static propTypes = { @@ -108,15 +14,18 @@ class TileJSONSourceEditor extends React.Component { } render() { - return - this.props.onChange({ - ...this.props.source, - url: url - })} - /> - + return
+ + this.props.onChange({ + ...this.props.source, + url: url + })} + /> + + {this.props.children} +
} } @@ -169,6 +78,7 @@ class TileURLSourceEditor extends React.Component { })} /> + {this.props.children} } @@ -211,8 +121,19 @@ class SourceTypeEditor extends React.Component { case 'tilexyz_vector': return case 'tilejson_raster': return case 'tilexyz_raster': return - case 'tilejson_raster-dem': return - case 'tilexyz_raster-dem': return + case 'tilejson_raster-dem': return + case 'tilexyz_raster-dem': return + + this.props.onChange({ + ...this.props.source, + encoding: encoding + })} + value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default} + /> + + default: return null } } From 77da0a6d308061888ec87fd3700c9a0c7845202d Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 17 May 2018 11:24:39 +0100 Subject: [PATCH 3/4] React v16.3.0 fixes. --- src/components/fields/_ZoomProperty.jsx | 4 ++-- src/components/inputs/NumberInput.jsx | 2 +- src/components/inputs/StringInput.jsx | 2 +- src/components/layers/JSONEditor.jsx | 2 +- src/components/layers/LayerEditor.jsx | 2 +- src/components/map/MapboxGlMap.jsx | 2 +- src/components/map/OpenLayers3Map.jsx | 2 +- src/components/modals/ExportModal.jsx | 2 +- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx index 5659b14..bca99ad 100644 --- a/src/components/fields/_ZoomProperty.jsx +++ b/src/components/fields/_ZoomProperty.jsx @@ -37,7 +37,7 @@ export default class ZoomProperty extends React.Component { } } - componentWillMount() { + componentDidMount() { this.setState({ refs: this.setStopRefs(this.props) }) @@ -66,7 +66,7 @@ export default class ZoomProperty extends React.Component { return newRefs; } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const newRefs = this.setStopRefs(nextProps); if(newRefs) { this.setState({ diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index c57af00..f4f3ebe 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/src/components/inputs/NumberInput.jsx @@ -17,7 +17,7 @@ class NumberInput extends React.Component { } } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { this.setState({ value: nextProps.value }) } diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index 6987b3c..54685fa 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -18,7 +18,7 @@ class StringInput extends React.Component { } } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { this.setState({ value: nextProps.value || '' }) } diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index ca30c5b..8cec16d 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/src/components/layers/JSONEditor.jsx @@ -29,7 +29,7 @@ class JSONEditor extends React.Component { } } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { this.setState({ code: JSON.stringify(nextProps.layer, null, 2) }) diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx index 15c22d9..d205640 100644 --- a/src/components/layers/LayerEditor.jsx +++ b/src/components/layers/LayerEditor.jsx @@ -69,7 +69,7 @@ export default class LayerEditor extends React.Component { this.state = { editorGroups } } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const additionalGroups = { ...this.state.editorGroups } layout[nextProps.layer.type].groups.forEach(group => { diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index c65410e..b5ff174 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -79,7 +79,7 @@ export default class MapboxGlMap extends React.Component { } } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { if(!this.state.map) return const metadata = nextProps.mapStyle.metadata || {} MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx index bb67432..113781a 100644 --- a/src/components/map/OpenLayers3Map.jsx +++ b/src/components/map/OpenLayers3Map.jsx @@ -29,7 +29,7 @@ class OpenLayers3Map extends React.Component { const styleFunc = olms.apply(this.map, newMapStyle) } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { require.ensure(["ol", "ol-mapbox-style"], () => { if(!this.map) return this.updateStyle(nextProps.mapStyle) diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index e75391d..c08a9c6 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -31,7 +31,7 @@ class Gist extends React.Component { } } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { this.setState({ ...this.state, preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token'] From d80d76724cc8929788a5645c1ec1c29c092147a1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 17 May 2018 11:46:33 +0100 Subject: [PATCH 4/4] Fixed more lint errors. --- src/components/modals/AddModal.jsx | 2 +- src/components/sources/SourceTypeEditor.jsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx index feb8343..b42b736 100644 --- a/src/components/modals/AddModal.jsx +++ b/src/components/modals/AddModal.jsx @@ -55,7 +55,7 @@ class AddModal extends React.Component { } } - componentWillUpdate(nextProps, nextState) { + UNSAFE_componentWillUpdate(nextProps, nextState) { // Check if source is valid for new type const oldType = this.state.type; const newType = nextState.type; diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index c55b46d..de8c902 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/src/components/sources/SourceTypeEditor.jsx @@ -11,6 +11,7 @@ class TileJSONSourceEditor extends React.Component { static propTypes = { source: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, + children: PropTypes.node, } render() { @@ -33,6 +34,7 @@ class TileURLSourceEditor extends React.Component { static propTypes = { source: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, + children: PropTypes.node, } changeTileUrl(idx, value) {