schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-29 00:20:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/master' into feature/add-range-slider

Browse source
This commit is contained in:
orangemug 2019-10-26 17:22:52 +01:00
commit ea3b9a20c5
54 changed files with 8413 additions and 8594 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.babelrc
View file

@ -4,6 +4,7 @@
"@babel/preset-react"
],
"plugins": [
"static-fs",
"react-hot-loader/babel",
"@babel/plugin-proposal-class-properties"
],

38
.circleci/config.yml
View file

@ -41,6 +41,7 @@ templates:
- run: mkdir -p /tmp/artifacts/logs
- run: npm run build
- run: npm run profiling-build
- run: npm run lint
- run: npm run lint-styles
- run: DOCKER_HOST=localhost npm test
@ -52,18 +53,23 @@ jobs:
build-linux-node-v8:
docker:
- image: node:8
- image: selenium/standalone-chrome:3.8.1
working_directory: ~/repo-linux-node-v8
steps: *wdio-steps
steps: *build-steps
build-linux-node-v10:
docker:
- image: node:10
- image: selenium/standalone-chrome:3.141.59
working_directory: ~/repo-linux-node-v10
steps: *build-steps
build-linux-node-v11:
steps: *wdio-steps
build-linux-node-v12:
docker:
- image: node:11
working_directory: ~/repo-linux-node-v11
- image: node:12
working_directory: ~/repo-linux-node-v12
steps: *build-steps
build-linux-node-v13:
docker:
- image: node:13
working_directory: ~/repo-linux-node-v13
steps: *build-steps
build-osx-node-v8:
macos:
@ -81,13 +87,21 @@ jobs:
- brew install node@10
working_directory: ~/repo-osx-node-v10
steps: *build-steps
build-osx-node-v11:
build-osx-node-v12:
macos:
xcode: "9.0"
dependencies:
override:
- brew install node@11
working_directory: ~/repo-osx-node-v11
- brew install node@12
working_directory: ~/repo-osx-node-v12
steps: *build-steps
build-osx-node-v13:
macos:
xcode: "9.0"
dependencies:
override:
- brew install node@13
working_directory: ~/repo-osx-node-v13
steps: *build-steps
workflows:
@ -96,7 +110,9 @@ workflows:
jobs:
- build-linux-node-v8
- build-linux-node-v10
- build-linux-node-v11
- build-linux-node-v12
- build-linux-node-v13
- build-osx-node-v8
- build-osx-node-v10
- build-osx-node-v11
- build-osx-node-v12
- build-osx-node-v13

1
.github/FUNDING.yml vendored Normal file
View file

@ -0,0 +1 @@
custom: "https://maputnik.github.io/donate"

12
appveyor.yml
View file

@ -3,12 +3,20 @@ environment:
matrix:
- nodejs_version: "8"
- nodejs_version: "10"
- nodejs_version: "11"
- nodejs_version: "12"
- nodejs_version: "13"
platform:
- x86
- x64
install:
- ps: Install-Product node $env:nodejs_version
# https://github.com/appveyor/ci/issues/2921#issuecomment-501016533
- ps: |
try {
Install-Product node $env:nodejs_version $env:platform
} catch {
echo "Unable to install node $env:nodejs_version, trying update..."
Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version) $env:platform
}
- md public
- npm --vs2015 install --global windows-build-tools
- npm install

324
config/wdio.conf.js
View file

@ -10,53 +10,279 @@ var server;
var SCREENSHOT_PATH = artifacts.pathSync("screenshots");
exports.config = {
specs: [
'./test/functional/index.js'
],
exclude: [
],
maxInstances: 10,
capabilities: [{
maxInstances: 5,
browserName: 'chrome'
}],
sync: true,
logLevel: 'verbose',
coloredLogs: true,
bail: 0,
screenshotPath: SCREENSHOT_PATH,
// Note: This is here because @orangemug currently runs Maputnik inside a docker container.
host: process.env.DOCKER_HOST || "0.0.0.0",
baseUrl: 'http://localhost',
waitforTimeout: 10000,
connectionRetryTimeout: 90000,
connectionRetryCount: 3,
framework: 'mocha',
reporters: ['spec'],
mochaOpts: {
ui: 'bdd',
// Because we don't know how long the initial build will take...
timeout: 4*60*1000
},
onPrepare: function (config, capabilities) {
return new Promise(function(resolve, reject) {
var compiler = webpack(webpackConfig);
server = new WebpackDevServer(compiler, {
stats: {
colors: true
}
});
server.listen(testConfig.port, (isDocker() ? "0.0.0.0" : "localhost"), function(err) {
if(err) {
reject(err);
}
else {
resolve();
}
});
})
},
onComplete: function(exitCode) {
server.close()
}
//
// ====================
// Runner Configuration
// ====================
//
// WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
// on a remote machine).
runner: 'local',
//
// ==================
// Specify Test Files
// ==================
// Define which test specs should run. The pattern is relative to the directory
// from which `wdio` was called. Notice that, if you are calling `wdio` from an
// NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
// directory is where your package.json resides, so `wdio` will be called from there.
//
specs: [
'./test/functional/index.js'
],
// Patterns to exclude.
exclude: [
// 'path/to/excluded/files'
],
//
// ============
// Capabilities
// ============
// Define your capabilities here. WebdriverIO can run multiple capabilities at the same
// time. Depending on the number of capabilities, WebdriverIO launches several test
// sessions. Within your capabilities you can overwrite the spec and exclude options in
// order to group specific specs to a specific capability.
//
// First, you can define how many instances should be started at the same time. Let's
// say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
// set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
// files and you set maxInstances to 10, all spec files will get tested at the same time
// and 30 processes will get spawned. The property handles how many capabilities
// from the same test should run tests.
//
maxInstances: 10,
//
// If you have trouble getting all important capabilities together, check out the
// Sauce Labs platform configurator - a great tool to configure your capabilities:
// https://docs.saucelabs.com/reference/platforms-configurator
//
capabilities: [{
// maxInstances can get overwritten per capability. So if you have an in-house Selenium
// grid with only 5 firefox instances available you can make sure that not more than
// 5 instances get started at a time.
maxInstances: 5,
//
browserName: 'chrome',
// If outputDir is provided WebdriverIO can capture driver session logs
// it is possible to configure which logTypes to include/exclude.
// excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
// excludeDriverLogs: ['bugreport', 'server'],
}],
//
// ===================
// Test Configurations
// ===================
// Define all options that are relevant for the WebdriverIO instance here
//
// Level of logging verbosity: trace | debug | info | warn | error | silent
logLevel: 'info',
//
// Set specific log levels per logger
// loggers:
// - webdriver, webdriverio
// - @wdio/applitools-service, @wdio/browserstack-service, @wdio/devtools-service, @wdio/sauce-service
// - @wdio/mocha-framework, @wdio/jasmine-framework
// - @wdio/local-runner, @wdio/lambda-runner
// - @wdio/sumologic-reporter
// - @wdio/cli, @wdio/config, @wdio/sync, @wdio/utils
// Level of logging verbosity: trace | debug | info | warn | error | silent
// logLevels: {
// webdriver: 'debug',
// '@wdio/applitools-service': 'info'
// },
//
// If you only want to run your tests until a specific amount of tests have failed use
// bail (default is 0 - don't bail, run all tests).
bail: 0,
//
screenshotPath: SCREENSHOT_PATH,
// Note: This is here because @orangemug currently runs Maputnik inside a docker container.
host: process.env.DOCKER_HOST || "0.0.0.0",
// Set a base URL in order to shorten url command calls. If your `url` parameter starts
// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
// gets prepended directly.
baseUrl: 'http://localhost',
//
// Default timeout for all waitFor* commands.
waitforTimeout: 10000,
//
// Default timeout in milliseconds for request
// if Selenium Grid doesn't send response
connectionRetryTimeout: 90000,
//
// Default request retries count
connectionRetryCount: 3,
//
// Test runner services
// Services take over a specific job you don't want to take care of. They enhance
// your test setup with almost no effort. Unlike plugins, they don't add new
// commands. Instead, they hook themselves up into the test process.
services: ['selenium-standalone'],
//
// Framework you want to run your specs with.
// The following are supported: Mocha, Jasmine, and Cucumber
// see also: https://webdriver.io/docs/frameworks.html
//
// Make sure you have the wdio adapter package for the specific framework installed
// before running any tests.
framework: 'mocha',
//
// The number of times to retry the entire specfile when it fails as a whole
// specFileRetries: 1,
//
// Test reporter for stdout.
// The only one supported by default is 'dot'
// see also: https://webdriver.io/docs/dot-reporter.html
reporters: ['spec'],
//
// Options to be passed to Mocha.
// See the full list at http://mochajs.org/
mochaOpts: {
ui: 'bdd',
// Because we don't know how long the initial build will take...
timeout: 4*60*1000
},
onPrepare: function (config, capabilities) {
return new Promise(function(resolve, reject) {
var compiler = webpack(webpackConfig);
server = new WebpackDevServer(compiler, {
stats: {
colors: true
}
});
server.listen(testConfig.port, (isDocker() ? "0.0.0.0" : "localhost"), function(err) {
if(err) {
reject(err);
}
else {
resolve();
}
});
})
},
onComplete: function(exitCode) {
server.close()
}
//
// =====
// Hooks
// =====
// WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
// it and to build services around it. You can either apply a single function or an array of
// methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
// resolved to continue.
/**
* Gets executed once before all workers get launched.
* @param {Object} config wdio configuration object
* @param {Array.<Object>} capabilities list of capabilities details
*/
// onPrepare: function (config, capabilities) {
// },
/**
* Gets executed just before initialising the webdriver session and test framework. It allows you
* to manipulate configurations depending on the capability or spec.
* @param {Object} config wdio configuration object
* @param {Array.<Object>} capabilities list of capabilities details
* @param {Array.<String>} specs List of spec file paths that are to be run
*/
// beforeSession: function (config, capabilities, specs) {
// },
/**
* Gets executed before test execution begins. At this point you can access to all global
* variables like `browser`. It is the perfect place to define custom commands.
* @param {Array.<Object>} capabilities list of capabilities details
* @param {Array.<String>} specs List of spec file paths that are to be run
*/
// before: function (capabilities, specs) {
// },
/**
* Runs before a WebdriverIO command gets executed.
* @param {String} commandName hook command name
* @param {Array} args arguments that command would receive
*/
// beforeCommand: function (commandName, args) {
// },
/**
* Hook that gets executed before the suite starts
* @param {Object} suite suite details
*/
// beforeSuite: function (suite) {
// },
/**
* Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
* @param {Object} test test details
*/
// beforeTest: function (test) {
// },
/**
* Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
* beforeEach in Mocha)
*/
// beforeHook: function () {
// },
/**
* Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
* afterEach in Mocha)
*/
// afterHook: function () {
// },
/**
* Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
* @param {Object} test test details
*/
// afterTest: function (test) {
// },
/**
* Hook that gets executed after the suite has ended
* @param {Object} suite suite details
*/
// afterSuite: function (suite) {
// },
/**
* Runs after a WebdriverIO command gets executed
* @param {String} commandName hook command name
* @param {Array} args arguments that command would receive
* @param {Number} result 0 - command success, 1 - command error
* @param {Object} error error object if any
*/
// afterCommand: function (commandName, args, result, error) {
// },
/**
* Gets executed after all tests are done. You still have access to all global variables from
* the test.
* @param {Number} result 0 - test pass, 1 - test fail
* @param {Array.<Object>} capabilities list of capabilities details
* @param {Array.<String>} specs List of spec file paths that ran
*/
// after: function (result, capabilities, specs) {
// },
/**
* Gets executed right after terminating the webdriver session.
* @param {Object} config wdio configuration object
* @param {Array.<Object>} capabilities list of capabilities details
* @param {Array.<String>} specs List of spec file paths that ran
*/
// afterSession: function (config, capabilities, specs) {
// },
/**
* Gets executed after all workers got shut down and the process is about to exit. An error
* thrown in the onComplete hook will result in the test run failing.
* @param {Object} exitCode 0 - success, 1 - fail
* @param {Object} config wdio configuration object
* @param {Array.<Object>} capabilities list of capabilities details
* @param {<Object>} results object containing test results
*/
// onComplete: function(exitCode, config, capabilities, results) {
// },
/**
* Gets executed when a refresh happens.
* @param {String} oldSessionId session ID of the old session
* @param {String} newSessionId session ID of the new session
*/
//onReload: function(oldSessionId, newSessionId) {
//}
}

20
config/webpack.profiling.config.js Normal file
View file

@ -0,0 +1,20 @@
const webpackProdConfig = require('./webpack.production.config');
const artifacts = require("../test/artifacts");
const OUTPATH = artifacts.pathSync("/profiling");
module.exports = {
...webpackProdConfig,
output: {
...webpackProdConfig.output,
path: OUTPATH,
},
resolve: {
...webpackProdConfig.resolve,
alias: {
...webpackProdConfig.resolve.alias,
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}
}
};

15117
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

123
package.json
View file

@ -1,11 +1,12 @@
{
"name": "maputnik",
"version": "1.5.0",
"version": "1.6.1",
"description": "A MapboxGL visual style editor",
"main": "''",
"scripts": {
"stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
"build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
"profiling-build": "webpack --config config/webpack.profiling.config.js --progress --profile --colors",
"test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
"test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
"start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
@ -20,42 +21,43 @@
"license": "MIT",
"homepage": "https://github.com/maputnik/editor#readme",
"dependencies": {
"@babel/runtime": "^7.1.2",
"@mapbox/mapbox-gl-rtl-text": "^0.2.1",
"@mapbox/mapbox-gl-style-spec": "^13.6.0",
"@babel/runtime": "^7.6.3",
"@mapbox/mapbox-gl-rtl-text": "^0.2.3",
"@mapbox/mapbox-gl-style-spec": "^13.9.1",
"classnames": "^2.2.6",
"codemirror": "^5.40.2",
"color": "^3.0.0",
"detect-browser": "^4.5.0",
"file-saver": "^1.3.8",
"codemirror": "^5.49.0",
"color": "^3.1.2",
"detect-browser": "^4.7.0",
"file-saver": "^2.0.2",
"jsonlint": "github:josdejong/jsonlint#85a19d7",
"lodash": "^4.17.15",
"lodash.capitalize": "^4.2.1",
"lodash.clamp": "^4.0.3",
"lodash.clonedeep": "^4.5.0",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"lodash.throttle": "^4.1.1",
"mapbox-gl": "^0.53.1",
"mapbox-gl": "^1.5.0",
"mapbox-gl-inspect": "^1.3.1",
"maputnik-design": "github:maputnik/design",
"ol": "^5.3.2",
"ol-mapbox-style": "^4.3.0",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-aria-menubutton": "^6.0.1",
"react-aria-modal": "^3.0.0",
"ol": "^6.0.1",
"ol-mapbox-style": "^5.0.2",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-aria-menubutton": "^6.2.0",
"react-aria-modal": "^4.0.0",
"react-autobind": "^1.0.6",
"react-autocomplete": "^1.8.1",
"react-codemirror2": "^5.1.0",
"react-collapse": "^4.0.3",
"react-color": "^2.14.1",
"react-dom": "^16.5.2",
"react-color": "^2.17.3",
"react-dom": "^16.10.2",
"react-file-reader-input": "^2.0.0",
"react-icon-base": "^2.1.2",
"react-icons": "^3.1.0",
"react-icons": "^3.7.0",
"react-motion": "^0.5.2",
"react-sortable-hoc": "^0.8.3",
"reconnecting-websocket": "^3.2.2",
"slugify": "^1.3.1",
"react-sortable-hoc": "^1.10.1",
"reconnecting-websocket": "^4.2.0",
"slugify": "^1.3.5",
"url": "^0.11.0"
},
"jshintConfig": {
@ -99,48 +101,51 @@
}
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/core": "^7.6.3",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.3",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "8.0.4",
"babel-plugin-istanbul": "^5.0.1",
"copy-webpack-plugin": "^4.5.2",
"cors": "^2.8.4",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"eslint": "^5.6.1",
"eslint-plugin-react": "^7.11.1",
"express": "^4.16.3",
"file-loader": "^2.0.0",
"@babel/preset-react": "^7.6.3",
"@wdio/cli": "^5.14.5",
"@wdio/local-runner": "^5.14.5",
"@wdio/mocha-framework": "^5.14.4",
"@wdio/selenium-standalone-service": "^5.13.2",
"@wdio/spec-reporter": "^5.14.5",
"@wdio/sync": "^5.14.4",
"babel-eslint": "^10.0.3",
"babel-loader": "8.0.6",
"babel-plugin-istanbul": "^5.2.0",
"babel-plugin-static-fs": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"cors": "^2.8.5",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"eslint": "^6.5.1",
"eslint-plugin-react": "^7.16.0",
"express": "^4.17.1",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"is-docker": "^1.1.0",
"is-docker": "^2.0.0",
"istanbul": "^0.4.5",
"istanbul-lib-coverage": "^2.0.1",
"istanbul-lib-coverage": "^2.0.5",
"mkdirp": "^0.5.1",
"mocha": "^5.2.0",
"node-sass": "^4.10.0",
"raw-loader": "^0.5.1",
"react-hot-loader": "^4.3.11",
"sass-loader": "^7.1.0",
"selenium-standalone": "^6.15.3",
"style-loader": "^0.23.0",
"stylelint": "^10.0.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-scss": "^3.5.4",
"mocha": "^6.2.1",
"node-sass": "^4.12.0",
"react-hot-loader": "^4.12.15",
"sass-loader": "^8.0.0",
"selenium-standalone": "^6.16.0",
"style-loader": "^1.0.0",
"stylelint": "^11.0.0",
"stylelint-config-recommended-scss": "^4.0.0",
"stylelint-scss": "^3.11.1",
"transform-loader": "^0.2.4",
"uuid": "^3.3.2",
"wdio-mocha-framework": "^0.6.4",
"wdio-selenium-standalone-service": "0.0.10",
"wdio-spec-reporter": "^0.1.5",
"webdriverio": "^4.13.2",
"webpack": "^4.20.2",
"webpack-bundle-analyzer": "^3.0.2",
"uuid": "^3.3.3",
"webdriverio": "^5.14.5",
"webpack": "^4.41.0",
"webpack-bundle-analyzer": "^3.5.2",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
}
}

80
src/components/App.jsx
View file

@ -2,6 +2,7 @@ import autoBind from 'react-autobind';
import React from 'react'
import cloneDeep from 'lodash.clonedeep'
import clamp from 'lodash.clamp'
import get from 'lodash.get'
import {arrayMove} from 'react-sortable-hoc'
import url from 'url'
@ -90,8 +91,15 @@ export default class App extends React.Component {
autoBind(this);
this.revisionStore = new RevisionStore()
const params = new URLSearchParams(window.location.search.substring(1))
let port = params.get("localport")
if (port == null && (window.location.port != 80 && window.location.port != 443)) {
port = window.location.port
}
this.styleStore = new ApiStyleStore({
onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false),
port: port,
host: params.get("localhost")
})
@ -218,6 +226,9 @@ export default class App extends React.Component {
showCollisionBoxes: false,
showOverdrawInspector: false,
},
openlayersDebugOptions: {
debugToolbox: false,
},
}
this.layerWatcher = new LayerWatcher({
@ -276,6 +287,27 @@ export default class App extends React.Component {
})
}
onChangeMetadataProperty = (property, value) => {
// If we're changing renderer reset the map state.
if (
property === 'maputnik:renderer' &&
value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
) {
this.setState({
mapState: 'map'
});
}
const changedStyle = {
...this.state.mapStyle,
metadata: {
...this.state.mapStyle.metadata,
[property]: value
}
}
this.onStyleChanged(changedStyle)
}
onStyleChanged = (newStyle, save=true) => {
const errors = validate(newStyle, latest)
@ -409,6 +441,27 @@ export default class App extends React.Component {
})
}
setDefaultValues = (styleObj) => {
const metadata = styleObj.metadata || {}
if(metadata['maputnik:renderer'] === undefined) {
const changedStyle = {
...styleObj,
metadata: {
...styleObj.metadata,
'maputnik:renderer': 'mbgljs'
}
}
return changedStyle
} else {
return styleObj
}
}
openStyle = (styleObj) => {
styleObj = this.setDefaultValues(styleObj)
this.onStyleChanged(styleObj)
}
fetchSources() {
const sourceList = {...this.state.sources};
@ -479,9 +532,10 @@ export default class App extends React.Component {
}
mapRenderer() {
const metadata = this.state.mapStyle.metadata || {};
const mapProps = {
mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
options: this.state.mapboxGlDebugOptions,
onDataChange: (e) => {
this.layerWatcher.analyzeMap(e.map)
this.fetchSources();
@ -496,9 +550,12 @@ export default class App extends React.Component {
if(renderer === 'ol') {
mapElement = <OpenLayersMap
{...mapProps}
debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
onLayerSelect={this.onLayerSelect}
/>
} else {
mapElement = <MapboxGlMap {...mapProps}
options={this.state.mapboxGlDebugOptions}
inspectModeEnabled={this.state.mapState === "inspect"}
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
onLayerSelect={this.onLayerSelect} />
@ -540,11 +597,20 @@ export default class App extends React.Component {
this.setModal(modalName, !this.state.isOpen[modalName]);
}
onChangeOpenlayersDebug = (key, value) => {
this.setState({
openlayersDebugOptions: {
...this.state.openlayersDebugOptions,
[key]: value,
}
});
}
onChangeMaboxGlDebug = (key, value) => {
this.setState({
mapboxGlDebugOptions: {
...this.state.mapboxGlDebugOptions,
[key]: value,
[key]: value,
}
});
}
@ -555,6 +621,7 @@ export default class App extends React.Component {
const metadata = this.state.mapStyle.metadata || {}
const toolbar = <Toolbar
renderer={this._getRenderer()}
mapState={this.state.mapState}
mapStyle={this.state.mapStyle}
inspectModeEnabled={this.state.mapState === "inspect"}
@ -578,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}
@ -603,7 +671,9 @@ export default class App extends React.Component {
<DebugModal
renderer={this._getRenderer()}
mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
openlayersDebugOptions={this.state.openlayersDebugOptions}
onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
isOpen={this.state.isOpen.debug}
onOpenToggle={this.toggleModal.bind(this, 'debug')}
/>
@ -615,8 +685,10 @@ export default class App extends React.Component {
<SettingsModal
mapStyle={this.state.mapStyle}
onStyleChanged={this.onStyleChanged}
onChangeMetadataProperty={this.onChangeMetadataProperty}
isOpen={this.state.isOpen.settings}
onOpenToggle={this.toggleModal.bind(this, 'settings')}
openlayersDebugOptions={this.state.openlayersDebugOptions}
/>
<ExportModal
mapStyle={this.state.mapStyle}
@ -626,7 +698,7 @@ export default class App extends React.Component {
/>
<OpenModal
isOpen={this.state.isOpen.open}
onStyleOpen={this.onStyleChanged}
onStyleOpen={this.openStyle}
onOpenToggle={this.toggleModal.bind(this, 'open')}
/>
<SourcesModal

2
src/components/Toolbar.jsx
View file

@ -114,6 +114,7 @@ export default class Toolbar extends React.Component {
onToggleModal: PropTypes.func,
onSetMapState: PropTypes.func,
mapState: PropTypes.string,
renderer: PropTypes.string,
}
state = {
@ -139,6 +140,7 @@ export default class Toolbar extends React.Component {
{
id: "inspect",
title: "Inspect",
disabled: this.props.renderer !== 'mbgljs',
},
{
id: "filter-deuteranopia",

18
src/components/fields/ColorField.jsx
View file

@ -2,6 +2,7 @@ import React from 'react'
import Color from 'color'
import ChromePicker from 'react-color/lib/components/chrome/Chrome'
import PropTypes from 'prop-types'
import lodash from 'lodash';
function formatColor(color) {
const rgb = color.rgb
@ -23,6 +24,15 @@ class ColorField extends React.Component {
pickerOpened: false
}
constructor () {
super();
this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
}
onChangeNoCheck (v) {
this.props.onChange(v);
}
//TODO: I much rather would do this with absolute positioning
//but I am too stupid to get it to work together with fixed position
//and scrollbars so I have to fallback to JavaScript
@ -57,6 +67,10 @@ class ColorField extends React.Component {
}
}
onChange (v) {
this.props.onChange(v === "" ? undefined : v);
}
render() {
const offset = this.calcPickerOffset()
var currentColor = this.color.object()
@ -78,7 +92,7 @@ class ColorField extends React.Component {
}}>
<ChromePicker
color={currentColor}
onChange={c => this.props.onChange(formatColor(c))}
onChange={c => this.onChangeNoCheck(formatColor(c))}
/>
<div
className="maputnik-color-picker-offset"
@ -110,7 +124,7 @@ class ColorField extends React.Component {
name={this.props.name}
placeholder={this.props.default}
value={this.props.value ? this.props.value : ""}
onChange={(e) => this.props.onChange(e.target.value)}
onChange={(e) => this.onChange(e.target.value)}
/>
</div>
}

2
src/components/fields/PropertyGroup.jsx
View file

@ -59,7 +59,7 @@ export default class PropertyGroup extends React.Component {
onChange={this.onPropertyChange}
key={fieldName}
fieldName={fieldName}
value={fieldValue === undefined ? fieldSpec.default : fieldValue}
value={fieldValue}
fieldSpec={fieldSpec}
/>
})

17
src/components/fields/SpecField.jsx
View file

@ -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}
/>
}

80
src/components/inputs/ArrayInput.jsx
View file

@ -12,29 +12,89 @@ class ArrayInput extends React.Component {
onChange: PropTypes.func,
}
changeValue(idx, newValue) {
console.log(idx, newValue)
const values = this.values.slice(0)
values[idx] = newValue
this.props.onChange(values)
static defaultProps = {
value: [],
default: [],
}
get values() {
return this.props.value || this.props.default || []
constructor (props) {
super(props);
this.state = {
value: this.props.value.slice(0),
// This is so we can compare changes in getDerivedStateFromProps
initialPropsValue: this.props.value.slice(0),
};
}
static getDerivedStateFromProps(props, state) {
const value = [];
const initialPropsValue = state.initialPropsValue.slice(0);
Array(props.length).fill(null).map((_, i) => {
if (props.value[i] === state.initialPropsValue[i]) {
value[i] = state.value[i];
}
else {
value[i] = state.value[i];
initialPropsValue[i] = state.value[i];
}
})
return {
value,
initialPropsValue,
};
}
isComplete (value) {
return Array(this.props.length).fill(null).every((_, i) => {
const val = value[i]
return !(val === undefined || val === "");
});
}
changeValue(idx, newValue) {
const value = this.state.value.slice(0);
value[idx] = newValue;
this.setState({
value,
}, () => {
if (this.isComplete(value)) {
this.props.onChange(value);
}
else {
// Unset until complete
this.props.onChange(undefined);
}
});
}
render() {
const inputs = this.values.map((v, i) => {
const {value} = this.state;
const containsValues = (
value.length > 0 &&
!value.every(val => {
return (val === "" || val === undefined)
})
);
const inputs = Array(this.props.length).fill(null).map((_, i) => {
if(this.props.type === 'number') {
return <NumberInput
key={i}
value={v}
default={containsValues ? undefined : this.props.default[i]}
value={value[i]}
required={containsValues ? true : false}
onChange={this.changeValue.bind(this, i)}
/>
} else {
return <StringInput
key={i}
value={v}
default={containsValues ? undefined : this.props.default[i]}
value={value[i]}
required={containsValues ? true : false}
onChange={this.changeValue.bind(this, i)}
/>
}

8
src/components/inputs/AutocompleteInput.jsx
View file

@ -44,6 +44,10 @@ class AutocompleteInput extends React.Component {
this.calcMaxHeight();
}
onChange (v) {
this.props.onChange(v === "" ? undefined : v);
}
render() {
return <div
ref={(el) => {
@ -68,8 +72,8 @@ class AutocompleteInput extends React.Component {
value={this.props.value}
items={this.props.options}
getItemValue={(item) => item[0]}
onSelect={v => this.props.onChange(v)}
onChange={(e, v) => this.props.onChange(v)}
onSelect={v => this.onChange(v)}
onChange={(e, v) => this.onChange(v)}
shouldItemRender={(item, value="") => {
if (typeof(value) === "string") {
return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1

27
src/components/inputs/DynamicArrayInput.jsx
View file

@ -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}

45
src/components/inputs/EnumInput.jsx Normal file
View file

@ -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 || this.props.default}
onChange={onChange}
/>
} else {
return <SelectInput
options={options}
value={value || this.props.default}
onChange={onChange}
/>
}
}
}
export default EnumInput

16
src/components/inputs/FontInput.jsx
View file

@ -16,13 +16,25 @@ class FontInput extends React.Component {
}
get values() {
return this.props.value || this.props.default.slice(1) || []
const out = this.props.value || this.props.default.slice(1) || [""];
// Always put a "" in the last field to you can keep adding entries
if (out[out.length-1] !== ""){
return out.concat("");
}
else {
return out;
}
}
changeFont(idx, newValue) {
const changedValues = this.values.slice(0)
changedValues[idx] = newValue
this.props.onChange(changedValues)
const filteredValues = changedValues
.filter(v => v !== undefined)
.filter(v => v !== "")
this.props.onChange(filteredValues);
}
render() {

2
src/components/inputs/InputBlock.jsx
View file

@ -20,7 +20,7 @@ class InputBlock extends React.Component {
onChange(e) {
const value = e.target.value
return this.props.onChange(value === "" ? null: value)
return this.props.onChange(value === "" ? undefined : value)
}
render() {

39
src/components/inputs/NumberInput.jsx
View file

@ -11,6 +11,7 @@ class NumberInput extends React.Component {
allowRange: PropTypes.bool,
rangeStep: PropTypes.number,
wdKey: PropTypes.string,
required: PropTypes.bool,
}
static defaultProps = {
@ -33,14 +34,14 @@ class NumberInput extends React.Component {
dirtyValue: props.value,
};
}
else {
return null;
}
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) {
@ -53,6 +54,10 @@ class NumberInput extends React.Component {
}
isValid(v) {
if (v === undefined) {
return true;
}
const value = parseFloat(v)
if(isNaN(value)) {
return false
@ -73,7 +78,7 @@ class NumberInput extends React.Component {
this.setState({editing: false});
// Reset explicitly to default value if value has been cleared
if(this.state.value === "") {
return this.changeValue(this.props.default)
return;
}
// If set value is invalid fall back to the last valid value from props or at last resort the default value
@ -81,7 +86,7 @@ class NumberInput extends React.Component {
if(this.isValid(this.props.value)) {
this.changeValue(this.props.value)
} else {
this.changeValue(this.props.default)
this.changeValue(undefined);
}
}
}
@ -108,6 +113,7 @@ class NumberInput extends React.Component {
}
render() {
<<<<<<< HEAD
if(
this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
this.props.min !== undefined && this.props.max !== undefined &&
@ -152,18 +158,15 @@ class NumberInput extends React.Component {
</div>
}
else {
return <div className="maputnik-number-container">
<input
key="text"
type="text"
spellCheck="false"
className="maputnik-number"
placeholder={this.props.default}
value={this.state.value}
onChange={e => this.changeValue(e.target.value)}
onBlur={this.resetValue}
/>
</div>
return <input
spellCheck="false"
className="maputnik-number"
placeholder={this.props.default}
value={this.state.value === undefined ? "" : this.state.value}
onChange={e => this.changeValue(e.target.value)}
onBlur={this.resetValue}
required={this.props.required}
/>
}
}
}

6
src/components/inputs/StringInput.jsx
View file

@ -9,6 +9,7 @@ class StringInput extends React.Component {
default: PropTypes.string,
onChange: PropTypes.func,
multi: PropTypes.bool,
required: PropTypes.bool,
}
constructor(props) {
@ -50,7 +51,7 @@ class StringInput extends React.Component {
spellCheck: !(tag === "input"),
className: classes.join(" "),
style: this.props.style,
value: this.state.value,
value: this.state.value === undefined ? "" : this.state.value,
placeholder: this.props.default,
onChange: e => {
this.setState({
@ -63,7 +64,8 @@ class StringInput extends React.Component {
this.setState({editing: false});
this.props.onChange(this.state.value);
}
}
},
required: this.props.required,
});
}
}

105
src/components/layers/JSONEditor.jsx
View file

@ -1,9 +1,9 @@
import React from 'react'
import PropTypes from 'prop-types'
import {Controlled as CodeMirror} from 'react-codemirror2'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
@ -19,42 +19,89 @@ import '../../vendor/codemirror/addon/lint/json-lint'
class JSONEditor extends React.Component {
static propTypes = {
layer: PropTypes.object.isRequired,
maxHeight: PropTypes.number,
onChange: PropTypes.func,
}
constructor(props) {
super(props)
this.state = {
code: JSON.stringify(props.layer, null, 2)
}
isEditing: false,
prevValue: this.getValue(),
};
}
getValue () {
return JSON.stringify(this.props.layer, null, 2);
}
componentDidMount () {
this._doc = CodeMirror(this._el, {
value: this.getValue(),
mode: {
name: "javascript",
json: true
},
tabSize: 2,
theme: 'maputnik',
viewportMargin: Infinity,
lineNumbers: true,
lint: true,
gutters: ["CodeMirror-lint-markers"],
scrollbarStyle: "null",
});
this._doc.on('change', this.onChange);
this._doc.on('focus', this.onFocus);
this._doc.on('blur', this.onBlur);
}
onFocus = () => {
this.setState({
isEditing: true
});
}
onBlur = () => {
this.setState({
isEditing: false
});
}
componentWillUnMount () {
this._doc.off('change', this.onChange);
this._doc.off('focus', this.onFocus);
this._doc.off('blur', this.onBlur);
}
componentDidUpdate(prevProps) {
if (prevProps.layer !== this.props.layer) {
this.setState({
code: JSON.stringify(this.props.layer, null, 2)
})
if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
this._cancelNextChange = true;
this._doc.setValue(
this.getValue(),
)
}
}
onCodeUpdate(newCode) {
try {
const parsedLayer = JSON.parse(newCode)
this.props.onChange(parsedLayer)
} catch(err) {
console.warn(err)
} finally {
this.setState({
code: newCode
})
onChange = (e) => {
if (this._cancelNextChange) {
this._cancelNextChange = false;
return;
}
const newCode = this._doc.getValue();
if (this.state.prevValue !== newCode) {
try {
const parsedLayer = JSON.parse(newCode)
this.props.onChange(parsedLayer)
} catch(err) {
console.warn(err)
}
}
}
resetValue() {
console.log('reset')
this.setState({
code: JSON.stringify(this.props.layer, null, 2)
})
prevValue: newCode,
});
}
render() {
@ -69,11 +116,15 @@ class JSONEditor extends React.Component {
scrollbarStyle: "null",
}
return <CodeMirror
value={this.state.code}
onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
onFocusChange={focused => focused ? true : this.resetValue()}
options={codeMirrorOptions}
const style = {};
if (this.props.maxHeight) {
style.maxHeight = this.props.maxHeight;
}
return <div
className="codemirror-container"
ref={(el) => this._el = el}
style={style}
/>
}
}

2
src/components/layers/LayerEditor.jsx
View file

@ -141,7 +141,7 @@ export default class LayerEditor extends React.Component {
onChange={v => this.changeProperty(null, 'source', v)}
/>
}
{['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
{['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
<LayerSourceLayerBlock
sourceLayerIds={sourceLayerIds}
value={this.props.layer['source-layer']}

45
src/components/layers/LayerList.jsx
View file

@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import lodash from 'lodash';
import LayerListGroup from './LayerListGroup'
import LayerListItem from './LayerListItem'
@ -116,6 +117,50 @@ class LayerListContainer extends React.Component {
return collapsed === undefined ? true : collapsed
}
shouldComponentUpdate (nextProps, nextState) {
// Always update on state change
if (this.state !== nextState) {
return true;
}
// This component tree only requires id and visibility from the layers
// objects
function getRequiredProps (layer) {
const out = {
id: layer.id,
};
if (layer.layout) {
out.layout = {
visibility: layer.layout.visibility
};
}
return out;
}
const layersEqual = lodash.isEqual(
nextProps.layers.map(getRequiredProps),
this.props.layers.map(getRequiredProps),
);
function withoutLayers (props) {
const out = {
...props
};
delete out['layers'];
return out;
}
// Compare the props without layers because we've already compared them
// efficiently above.
const propsEqual = lodash.isEqual(
withoutLayers(this.props),
withoutLayers(nextProps)
);
const propsChanged = !(layersEqual && propsEqual);
return propsChanged;
}
render() {
const listItems = []

17
src/components/map/FeatureLayerPopup.jsx
View file

@ -34,6 +34,11 @@ class FeatureLayerPopup extends React.Component {
}
_getFeatureColor(feature, zoom) {
// Guard because openlayers won't have this
if (!feature.layer.paint) {
return;
}
try {
const paintProps = feature.layer.paint;
let propName;
@ -105,11 +110,13 @@ class FeatureLayerPopup extends React.Component {
this.props.onLayerSelect(feature.layer.id)
}}
>
<LayerIcon type={feature.layer.type} style={{
width: 14,
height: 14,
paddingRight: 3
}}/>
{feature.layer.type &&
<LayerIcon type={feature.layer.type} style={{
width: 14,
height: 14,
paddingRight: 3
}}/>
}
{feature.layer.id}
{feature.counter && <span> × {feature.counter}</span>}
</label>

12
src/components/map/MapboxGlMap.jsx
View file

@ -94,16 +94,6 @@ export default class MapboxGlMap extends React.Component {
}
}
shouldComponentUpdate(nextProps, nextState) {
let should = false;
try {
should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
} catch(e) {
// no biggie, carry on
}
return should;
}
componentDidUpdate(prevProps) {
if(!IS_SUPPORTED) return;
@ -144,7 +134,7 @@ export default class MapboxGlMap extends React.Component {
const zoom = new ZoomControl;
map.addControl(zoom, 'top-right');
const nav = new MapboxGl.NavigationControl();
const nav = new MapboxGl.NavigationControl({visualizePitch:true});
map.addControl(nav, 'top-right');
const tmpNode = document.createElement('div');

137
src/components/map/OpenLayersMap.jsx
View file

@ -1,11 +1,28 @@
import React from 'react'
import {throttle} from 'lodash';
import PropTypes from 'prop-types'
import { loadJSON } from '../../libs/urlopen'
import FeatureLayerPopup from './FeatureLayerPopup';
import 'ol/ol.css'
import {apply} from 'ol-mapbox-style';
import {Map, View} from 'ol';
import {Map, View, Proj, Overlay} from 'ol';
import {toLonLat} from 'ol/proj';
import {toStringHDMS} from 'ol/coordinate';
function renderCoords (coords) {
if (!coords || coords.length < 2) {
return null;
}
else {
return <span className="maputnik-coords">
{coords.map((coord) => String(coord).padStart(7, "\u00A0")).join(', ')}
</span>
}
}
export default class OpenLayersMap extends React.Component {
static propTypes = {
@ -13,49 +30,137 @@ export default class OpenLayersMap extends React.Component {
mapStyle: PropTypes.object.isRequired,
accessToken: PropTypes.string,
style: PropTypes.object,
onLayerSelect: PropTypes.func.isRequired,
debugToolbox: PropTypes.bool.isRequired,
}
static defaultProps = {
onMapLoaded: () => {},
onDataChange: () => {},
onLayerSelect: () => {},
}
constructor(props) {
super(props);
this.state = {
zoom: 0,
rotation: 0,
cursor: [],
center: [],
};
this.updateStyle = throttle(this._updateStyle.bind(this), 200);
}
updateStyle(newMapStyle) {
_updateStyle(newMapStyle) {
if(!this.map) return;
// See <https://github.com/openlayers/ol-mapbox-style/issues/215#issuecomment-493198815>
this.map.getLayers().clear();
apply(this.map, newMapStyle);
}
componentDidUpdate() {
this.updateStyle(this.props.mapStyle);
componentDidUpdate(prevProps) {
if (this.props.mapStyle !== prevProps.mapStyle) {
this.updateStyle(this.props.mapStyle);
}
}
componentDidMount() {
this.updateStyle(this.props.mapStyle);
this.overlay = new Overlay({
element: this.popupContainer,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
const map = new Map({
target: this.container,
layers: [],
overlays: [this.overlay],
view: new View({
zoom: 2,
center: [52.5, -78.4]
zoom: 1,
center: [180, -90],
})
});
map.on('pointermove', (evt) => {
var coords = toLonLat(evt.coordinate);
this.setState({
cursor: [
coords[0].toFixed(2),
coords[1].toFixed(2)
]
})
})
map.on('postrender', (evt) => {
const center = toLonLat(map.getView().getCenter());
this.setState({
center: [
center[0].toFixed(2),
center[1].toFixed(2),
],
rotation: map.getView().getRotation().toFixed(2),
zoom: map.getView().getZoom().toFixed(2)
});
});
this.map = map;
this.updateStyle(this.props.mapStyle);
}
closeOverlay = (e) => {
e.target.blur();
this.overlay.setPosition(undefined);
}
render() {
return <div
ref={x => this.container = x}
style={{
width: "100%",
height: "100%",
backgroundColor: '#fff',
...this.props.style,
}}>
return <div className="maputnik-ol-container">
<div
ref={x => this.popupContainer = x}
style={{background: "black"}}
className="maputnik-popup"
>
<button
className="mapboxgl-popup-close-button"
onClick={this.closeOverlay}
aria-label="Close popup"
>
×
</button>
<FeatureLayerPopup
features={this.state.selectedFeatures || []}
onLayerSelect={this.props.onLayerSelect}
/>
</div>
<div className="maputnik-ol-zoom">
Zoom level: {this.state.zoom}
</div>
{this.props.debugToolbox &&
<div className="maputnik-ol-debug">
<div>
<label>cursor: </label>
<span>{renderCoords(this.state.cursor)}</span>
</div>
<div>
<label>center: </label>
<span>{renderCoords(this.state.center)}</span>
</div>
<div>
<label>rotation: </label>
<span>{this.state.rotation}</span>
</div>
</div>
}
<div
className="maputnik-ol"
ref={x => this.container = x}
style={{
...this.props.style,
}}>
</div>
</div>
}
}

23
src/components/modals/AddModal.jsx
View file

@ -53,10 +53,10 @@ class AddModal extends React.Component {
}
}
UNSAFE_componentWillUpdate(nextProps, nextState) {
componentDidUpdate(prevProps, prevState) {
// Check if source is valid for new type
const oldType = this.state.type;
const newType = nextState.type;
const oldType = prevState.type;
const newType = this.state.type;
const availableSourcesOld = this.getSources(oldType);
const availableSourcesNew = this.getSources(newType);
@ -64,11 +64,11 @@ class AddModal extends React.Component {
if(
// Type has changed
oldType !== newType
&& this.state.source !== ""
&& prevState.source !== ""
// Was a valid source previously
&& availableSourcesOld.indexOf(this.state.source) > -1
&& availableSourcesOld.indexOf(prevState.source) > -1
// And is not a valid source now
&& availableSourcesNew.indexOf(nextState.source) < 0
&& availableSourcesNew.indexOf(this.state.source) < 0
) {
// Clear the source
this.setState({
@ -91,10 +91,19 @@ class AddModal extends React.Component {
"line",
"symbol",
"circle",
"fill-extrusion"
"fill-extrusion",
"heatmap"
],
raster: [
"raster"
],
geojson: [
"fill",
"line",
"symbol",
"circle",
"fill-extrusion",
"heatmap"
]
}

14
src/components/modals/DebugModal.js
View file

@ -9,8 +9,10 @@ class DebugModal extends React.Component {
isOpen: PropTypes.bool.isRequired,
renderer: PropTypes.string.isRequired,
onChangeMaboxGlDebug: PropTypes.func.isRequired,
onChangeOpenlayersDebug: PropTypes.func.isRequired,
onOpenToggle: PropTypes.func.isRequired,
mapboxGlDebugOptions: PropTypes.object,
openlayersDebugOptions: PropTypes.object,
}
render() {
@ -33,9 +35,15 @@ class DebugModal extends React.Component {
</ul>
}
{this.props.renderer === 'ol' &&
<div>
No debug options available for the OpenLayers renderer
</div>
<ul>
{Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
return <li key={key}>
<label>
<input type="checkbox" checked={val} onClick={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
</label>
</li>
})}
</ul>
}
</div>
</Modal>

170
src/components/modals/SettingsModal.jsx
View file

@ -3,40 +3,81 @@ import PropTypes from 'prop-types'
import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import ArrayInput from '../inputs/ArrayInput'
import NumberInput from '../inputs/NumberInput'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import EnumInput from '../inputs/EnumInput'
import ColorField from '../fields/ColorField'
import Modal from './Modal'
class SettingsModal extends React.Component {
static propTypes = {
mapStyle: PropTypes.object.isRequired,
onStyleChanged: PropTypes.func.isRequired,
onChangeMetadataProperty: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
onOpenToggle: PropTypes.func.isRequired,
}
changeTransitionProperty(property, value) {
const transition = {
...this.props.mapStyle.transition,
}
if (value === undefined) {
delete transition[property];
}
else {
transition[property] = value;
}
this.props.onStyleChanged({
...this.props.mapStyle,
transition,
});
}
changeLightProperty(property, value) {
const light = {
...this.props.mapStyle.light,
}
if (value === undefined) {
delete light[property];
}
else {
light[property] = value;
}
this.props.onStyleChanged({
...this.props.mapStyle,
light,
});
}
changeStyleProperty(property, value) {
const changedStyle = {
...this.props.mapStyle,
[property]: value
}
this.props.onStyleChanged(changedStyle)
}
};
changeMetadataProperty(property, value) {
const changedStyle = {
...this.props.mapStyle,
metadata: {
...this.props.mapStyle.metadata,
[property]: value
}
if (value === undefined) {
delete changedStyle[property];
}
this.props.onStyleChanged(changedStyle)
else {
changedStyle[property] = value;
}
this.props.onStyleChanged(changedStyle);
}
render() {
const metadata = this.props.mapStyle.metadata || {}
const {onChangeMetadataProperty, mapStyle} = this.props;
const inputProps = { }
const light = this.props.mapStyle.light || {};
const transition = this.props.mapStyle.transition || {};
return <Modal
data-wd-key="modal-settings"
isOpen={this.props.isOpen}
@ -78,7 +119,7 @@ class SettingsModal extends React.Component {
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:mapbox_access_token"
value={metadata['maputnik:mapbox_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
/>
</InputBlock>
@ -86,7 +127,7 @@ class SettingsModal extends React.Component {
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:openmaptiles_access_token"
value={metadata['maputnik:openmaptiles_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
/>
</InputBlock>
@ -94,7 +135,101 @@ class SettingsModal extends React.Component {
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:thunderforest_access_token"
value={metadata['maputnik:thunderforest_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
/>
</InputBlock>
<InputBlock label={"Center"} doc={latest.$root.center.doc}>
<ArrayInput
length={2}
type="number"
value={mapStyle.center}
default={latest.$root.center.default || [0, 0]}
onChange={this.changeStyleProperty.bind(this, "center")}
/>
</InputBlock>
<InputBlock label={"Zoom"} doc={latest.$root.zoom.doc}>
<NumberInput
{...inputProps}
value={mapStyle.zoom}
default={latest.$root.zoom.default || 0}
onChange={this.changeStyleProperty.bind(this, "zoom")}
/>
</InputBlock>
<InputBlock label={"Bearing"} doc={latest.$root.bearing.doc}>
<NumberInput
{...inputProps}
value={mapStyle.bearing}
default={latest.$root.bearing.default}
onChange={this.changeStyleProperty.bind(this, "bearing")}
/>
</InputBlock>
<InputBlock label={"Pitch"} doc={latest.$root.pitch.doc}>
<NumberInput
{...inputProps}
value={mapStyle.pitch}
default={latest.$root.pitch.default}
onChange={this.changeStyleProperty.bind(this, "pitch")}
/>
</InputBlock>
<InputBlock label={"Light anchor"} doc={latest.light.anchor.doc}>
<EnumInput
{...inputProps}
value={light.anchor}
options={Object.keys(latest.light.anchor.values)}
default={latest.light.anchor.default}
onChange={this.changeLightProperty.bind(this, "anchor")}
/>
</InputBlock>
<InputBlock label={"Light color"} doc={latest.light.color.doc}>
<ColorField
{...inputProps}
value={light.color}
default={latest.light.color.default}
onChange={this.changeLightProperty.bind(this, "color")}
/>
</InputBlock>
<InputBlock label={"Light intensity"} doc={latest.light.intensity.doc}>
<NumberInput
{...inputProps}
value={light.intensity}
default={latest.light.intensity.default}
onChange={this.changeLightProperty.bind(this, "intensity")}
/>
</InputBlock>
<InputBlock label={"Light position"} doc={latest.light.position.doc}>
<ArrayInput
{...inputProps}
type="number"
length={latest.light.position.length}
value={light.position}
default={latest.light.position.default}
onChange={this.changeLightProperty.bind(this, "position")}
/>
</InputBlock>
<InputBlock label={"Transition delay"} doc={latest.transition.delay.doc}>
<NumberInput
{...inputProps}
value={transition.delay}
default={latest.transition.delay.default}
onChange={this.changeTransitionProperty.bind(this, "delay")}
/>
</InputBlock>
<InputBlock label={"Transition duration"} doc={latest.transition.duration.doc}>
<NumberInput
{...inputProps}
value={transition.duration}
default={latest.transition.duration.default}
onChange={this.changeTransitionProperty.bind(this, "duration")}
/>
</InputBlock>
@ -106,9 +241,12 @@ class SettingsModal extends React.Component {
['ol', 'Open Layers (experimental)'],
]}
value={metadata['maputnik:renderer'] || 'mbgljs'}
onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
/>
</InputBlock>
</div>
</Modal>
}

20
src/components/modals/SourcesModal.jsx
View file

@ -52,7 +52,14 @@ function editorMode(source) {
if(source.tiles) return 'tilexyz_vector'
return 'tilejson_vector'
}
if(source.type === 'geojson') return 'geojson'
if(source.type === 'geojson') {
if (typeof(source.data) === "string") {
return 'geojson_url';
}
else {
return 'geojson_json';
}
}
return null
}
@ -106,9 +113,13 @@ class AddSource extends React.Component {
defaultSource(mode) {
const source = (this.state || {}).source || {}
switch(mode) {
case 'geojson': return {
case 'geojson_url': return {
type: 'geojson',
data: source.data || 'http://localhost:3000/geojson.json'
data: 'http://localhost:3000/geojson.json'
}
case 'geojson_json': return {
type: 'geojson',
data: {}
}
case 'tilejson_vector': return {
type: 'vector',
@ -155,7 +166,8 @@ class AddSource extends React.Component {
<InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
<SelectInput
options={[
['geojson', 'GeoJSON'],
['geojson_json', 'GeoJSON (JSON)'],
['geojson_url', 'GeoJSON (URL)'],
['tilejson_vector', 'Vector (TileJSON URL)'],
['tilexyz_vector', 'Vector (XYZ URLs)'],
['tilejson_raster', 'Raster (TileJSON URL)'],

30
src/components/sources/SourceTypeEditor.jsx
View file

@ -5,6 +5,7 @@ import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import NumberInput from '../inputs/NumberInput'
import SelectInput from '../inputs/SelectInput'
import JSONEditor from '../layers/JSONEditor'
class TileJSONSourceEditor extends React.Component {
@ -86,14 +87,14 @@ class TileURLSourceEditor extends React.Component {
}
}
class GeoJSONSourceEditor extends React.Component {
class GeoJSONSourceUrlEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
}
render() {
return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
return <InputBlock label={"GeoJSON URL"} doc={latest.source_geojson.data.doc}>
<StringInput
value={this.props.source.data}
onChange={data => this.props.onChange({
@ -105,6 +106,28 @@ class GeoJSONSourceEditor extends React.Component {
}
}
class GeoJSONSourceJSONEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
}
render() {
return <InputBlock label={"GeoJSON"} doc={latest.source_geojson.data.doc}>
<JSONEditor
layer={this.props.source.data}
maxHeight={200}
onChange={data => {
this.props.onChange({
...this.props.source,
data,
})
}}
/>
</InputBlock>
}
}
class SourceTypeEditor extends React.Component {
static propTypes = {
mode: PropTypes.string.isRequired,
@ -118,7 +141,8 @@ class SourceTypeEditor extends React.Component {
onChange: this.props.onChange,
}
switch(this.props.mode) {
case 'geojson': return <GeoJSONSourceEditor {...commonProps} />
case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
case 'geojson_json': return <GeoJSONSourceJSONEditor {...commonProps} />
case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />

5
src/config/layout.json
View file

@ -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"
]
},
{

64
src/config/styles.json
View file

@ -2,61 +2,67 @@
{
"id": "klokantech-basic",
"title": "Klokantech Basic",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.8/style.json",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@e142f83/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
},
{
"id": "dark-matter",
"title": "Dark Matter",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@v1.7/style.json",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@1dcc1d3/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png"
},
{
"id": "positron",
"title": "Positron",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.7/style.json",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@2877814/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
},
{
"id": "osm-bright",
"title": "OSM Bright",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.8/style.json",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@500e26e/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
},
{
"id": "toner-gl-style",
"title": "Toner",
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/toner-gl-style@bb49571/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/toner.png"
},
{
"id": "osm-liberty",
"title": "OSM Liberty",
"url": "https://maputnik.github.io/osm-liberty/style.json",
"thumbnail": "https://maputnik.github.io/osm-liberty/thumbnail.png"
"thumbnail": "https://maputnik.github.io/thumbnails/osm-liberty.png"
},
{
"id": "os-zoomstack-outdoor",
"title": "Zoomstack Outdoor",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-outdoor/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
},
{
"id": "os-zoomstack-road",
"title": "Zoomstack Road",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-road/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
},
{
"id": "os-zoomstack-light",
"title": "Zoomstack Light",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-light/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
},
{
"id": "os-zoomstack-night",
"title": "Zoomstack Night",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-night/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
},
{
"id": "empty-style",
"title": "Empty Style",
"url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
"thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
},
{
"id": "os-zoomstack-outdoor",
"title": "Zoomstack Outdoor",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-outdoor/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
},
{
"id": "os-zoomstack-road",
"title": "Zoomstack Road",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-road/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
},
{
"id": "os-zoomstack-light",
"title": "Zoomstack Light",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-light/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
},
{
"id": "os-zoomstack-night",
"title": "Zoomstack Night",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-night/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
}
]

2
src/config/tilesets.json
View file

@ -16,7 +16,7 @@
},
"open_zoomstack": {
"type": "vector",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/data/vector/open-zoomstack/config.json",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/data/vector/open-zoomstack/config.json",
"title": "OS Open Zoomstack"
}
}

2
src/config/tokens.json
View file

@ -1,5 +1,5 @@
{
"mapbox": "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w",
"openmaptiles": "Og58UhhtiiTaLVlPtPgs",
"openmaptiles": "KDhMfHvorAFkFe64wlZb",
"thunderforest": "b71f7f0ba4064f5eb9e903859a9cf5c6"
}

26
src/libs/apistore.js
View file

@ -1,37 +1,37 @@
import style from './style.js'
import ReconnectingWebSocket from 'reconnecting-websocket'
const host = 'localhost'
const port = '8000'
const localUrl = `http://${host}:${port}`
const websocketUrl = `ws://${host}:${port}/ws`
export class ApiStyleStore {
constructor(opts) {
this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
const port = opts.port || '8000'
const host = opts.host || 'localhost'
this.localUrl = `http://${host}:${port}`
this.websocketUrl = `ws://${host}:${port}/ws`
this.init = this.init.bind(this)
}
init(cb) {
fetch(localUrl + '/styles', {
fetch(this.localUrl + '/styles', {
mode: 'cors',
})
.then(function(response) {
.then((response) => {
return response.json();
})
.then(function(body) {
.then((body) => {
const styleIds = body;
this.latestStyleId = styleIds[0]
this.notifyLocalChanges()
cb(null)
})
.catch(function() {
.catch(function(e) {
cb(new Error('Can not connect to style API'))
})
}
notifyLocalChanges() {
const connection = new ReconnectingWebSocket(websocketUrl)
const connection = new ReconnectingWebSocket(this.websocketUrl)
connection.onmessage = e => {
if(!e.data) return
console.log('Received style update from API')
@ -48,7 +48,7 @@ export class ApiStyleStore {
latestStyle(cb) {
if(this.latestStyleId) {
fetch(localUrl + '/styles/' + this.latestStyleId, {
fetch(this.localUrl + '/styles/' + this.latestStyleId, {
mode: 'cors',
})
.then(function(response) {
@ -65,7 +65,7 @@ export class ApiStyleStore {
// Save current style replacing previous version
save(mapStyle) {
const id = mapStyle.id
fetch(localUrl + '/styles/' + id, {
fetch(this.localUrl + '/styles/' + id, {
method: "PUT",
mode: 'cors',
headers: {

6
src/libs/layer.js
View file

@ -31,7 +31,11 @@ export function changeProperty(layer, group, property, newValue) {
if(newValue === undefined) {
if(group) {
const newLayer = {
...layer
...layer,
// Change object so the diff works in ./src/components/map/MapboxGlMap.jsx
[group]: {
...layer[group]
}
};
delete newLayer[group][property];

4
src/libs/mapbox-rtl.js
View file

@ -1,7 +1,7 @@
import MapboxGl from 'mapbox-gl'
import {readFileSync} from 'fs'
// Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
const data = require("raw-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
const data = readFileSync(__dirname+"/../../node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js", "utf8");
const blob = new window.Blob([data], {
type: "text/javascript"

10
src/mapboxgl.css
View file

@ -42,7 +42,7 @@
}
.mapboxgl-ctrl-zoom {
color: rgb(138, 138, 138);
color: #a4a4a4;
font-weight: bold;
padding: 4px 8px;
user-select: none;
@ -62,15 +62,15 @@
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%238e8e8e%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%238e8e8e%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%238e8e8e%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E")
.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23f0f0f0%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E")
}
.mapboxgl-ctrl-inspect {

9
src/styles/_codemirror.scss Normal file
View file

@ -0,0 +1,9 @@
.CodeMirror-lint-tooltip {
z-index: 2000 !important;
}
.codemirror-container {
max-width: 100%;
position: relative;
overflow: auto;
}

5
src/styles/_input.scss
View file

@ -11,6 +11,11 @@
border: none;
background-color: $color-gray;
color: lighten($color-lowgray, 12);
&:invalid {
border: solid 1px #B71C1C;
border-radius: 2px;
}
}
.maputnik-string {

67
src/styles/_map.scss
View file

@ -1,7 +1,13 @@
//OPENLAYERS
.maputnik-layout {
.ol-zoom {
top: 10px;
top: 40px;
right: 10px;
left: auto;
}
.ol-rotate {
top: 94px;
right: 10px;
left: auto;
}
@ -10,6 +16,11 @@
height: 20px;
}
.ol-attribution a {
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
}
.ol-control {
button {
background-color: rgb(28, 31, 36);
@ -20,3 +31,57 @@
}
}
}
.maputnik-ol {
width: 100%;
height: 100%;
}
.maputnik-ol-popup {
background: $color-black;
}
.maputnik-coords {
font-family: monospace;
&:before {
content: '[';
color: #888;
}
&:after {
content: ']';
color: #888;
}
}
.maputnik-ol-debug {
font-family: monospace;
font-size: smaller;
position: absolute;
bottom: 10px;
left: 10px;
background: rgb(28, 31, 36);
padding: 6px 8px;
border-radius: 2px;
z-index: 9999;
}
.maputnik-ol-zoom {
position: absolute;
right: 10px;
top: 10px;
background: #1c1f24;
border-radius: 2px;
padding: 6px 8px;
color: $color-lowgray;
z-index: 9999;
font-size: 12px;
font-weight: bold;
}
.maputnik-ol-container {
display: flex;
flex: 1;
position: relative;
}

16
src/styles/_modal.scss
View file

@ -180,10 +180,26 @@
border-width: 2px;
border-style: solid;
padding: $margin-2;
.maputnik-input-block-label {
width: 30%;
}
.maputnik-input-block-content {
width: 70%;
}
}
.maputnik-add-source {
@extend .clearfix;
.maputnik-input-block-label {
width: 30%;
}
.maputnik-input-block-content {
width: 70%;
}
}
.maputnik-add-source-button {

4
src/styles/_popup.scss
View file

@ -22,12 +22,14 @@
.maputnik-popup-layer-id {
padding-left: $margin-2;
padding-right: $margin-2;
padding-right: 1.6em;
background-color: $color-midgray;
color: $color-white;
}
.maputnik-feature-property-popup {
max-height: calc(50vh - 40px); /* toolbar height: 40px */
overflow-y: auto;
.maputnik-input-block {
margin: 0;
margin-left: $margin-2;

3
src/styles/_react-codemirror.scss
View file

@ -1,3 +0,0 @@
.react-codemirror2 {
max-width: 100%;
}

15
src/styles/_zoomproperty.scss
View file

@ -45,17 +45,12 @@
}
.maputnik-delete-stop {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
vertical-align: middle;
@extend .maputnik-icon-button;
vertical-align: top;
.maputnik-doc-wrapper {
width: auto;
}
.maputnik-doc-target {
cursor: pointer;
}
}
.maputnik-add-stop {

2
src/styles/index.scss
View file

@ -37,8 +37,8 @@ $toolbar-offset: 0;
@import 'zoomproperty';
@import 'popup';
@import 'map';
@import 'codemirror';
@import 'react-collapse';
@import 'react-codemirror';
/**
* Hacks for webdriverio isVisibleWithinViewport

19
test/functional/helper.js
View file

@ -18,7 +18,7 @@ module.exports = {
var result = browser.executeAsync(function(done) {
window.debug.get("maputnik", "styleStore").latestStyle(done);
})
return result.value;
return result;
},
getRevisionStore: function(browser) {
var result = browser.execute(function(done) {
@ -34,15 +34,16 @@ module.exports = {
modal: {
addLayer: {
open: function() {
var selector = wd.$('layer-list:add-layer');
browser.click(selector);
const selector = $(wd.$('layer-list:add-layer'));
selector.click();
// Wait for events
browser.flushReactUpdates();
browser.waitForExist(wd.$('modal:add-layer'));
browser.isVisible(wd.$('modal:add-layer'));
browser.isVisibleWithinViewport(wd.$('modal:add-layer'));
const elem = $(wd.$('modal:add-layer'));
elem.waitForExist();
elem.isDisplayed();
elem.isDisplayedInViewport();
// Wait for events
browser.flushReactUpdates();
@ -58,7 +59,8 @@ module.exports = {
id = type+":"+uuid();
}
browser.selectByValue(wd.$("add-layer.layer-type", "select"), type);
const selectBox = $(wd.$("add-layer.layer-type", "select"));
selectBox.selectByAttribute('value', type);
browser.flushReactUpdates();
browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
@ -67,7 +69,8 @@ module.exports = {
}
browser.flushReactUpdates();
browser.click(wd.$("add-layer"));
const elem_addLayer = $(wd.$("add-layer"));
elem_addLayer.click();
return id;
}

5
test/functional/index.js
View file

@ -11,11 +11,12 @@ describe('maputnik', function() {
"geojson:example",
"raster:raster"
]));
browser.alertAccept();
browser.acceptAlert();
browser.execute(function() {
localStorage.setItem("survey", true);
});
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
});

51
test/functional/layers/index.js
View file

@ -11,8 +11,9 @@ describe("layers", function() {
"geojson:example",
"raster:raster"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
helper.modal.addLayer.open();
@ -33,7 +34,8 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":delete", ""));
const elem = $(wd.$("layer-list-item:"+id+":delete", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -54,7 +56,8 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":copy", ""));
const elem = $(wd.$("layer-list-item:"+id+":copy", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -83,7 +86,8 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
const elem = $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -96,7 +100,7 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -147,11 +151,13 @@ describe("layers", function() {
// Setup
var id = uuid();
browser.selectByValue(wd.$("add-layer.layer-type", "select"), "background");
const selectBox = $(wd.$("add-layer.layer-type", "select"));
selectBox.selectByAttribute('value', "background");
browser.flushReactUpdates();
browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
browser.click(wd.$("add-layer"));
const elem = $(wd.$("add-layer"));
elem.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -169,11 +175,13 @@ describe("layers", function() {
it("id", function() {
var bgId = createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId))
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
var id = uuid();
browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
browser.click(wd.$("min-zoom"))
const elem2 = $(wd.$("min-zoom"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -190,9 +198,11 @@ describe("layers", function() {
it("min-zoom", function() {
var bgId = createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId))
browser.setValueSafe(wd.$("min-zoom", 'input[type="text"]'), 1)
browser.click(wd.$("layer-editor.layer-id", "input"));
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
browser.setValueSafe(wd.$("min-zoom", "input"), 1)
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -220,9 +230,11 @@ describe("layers", function() {
it("max-zoom", function() {
var bgId = createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId))
browser.setValueSafe(wd.$("max-zoom", 'input[type="text"]'), 1)
browser.click(wd.$("layer-editor.layer-id", "input"));
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
browser.setValueSafe(wd.$("max-zoom", "input"), 1)
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -238,9 +250,11 @@ describe("layers", function() {
var bgId = createBackground();
var id = uuid();
browser.click(wd.$("layer-list-item:background:"+bgId));
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
browser.click(wd.$("layer-editor.layer-id", "input"));
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -484,4 +498,3 @@ describe("layers", function() {
})
})
});

71
test/functional/modals/index.js
View file

@ -7,14 +7,16 @@ var helper = require("../helper");
function closeModal(wdKey) {
browser.waitUntil(function() {
return browser.isVisibleWithinViewport(wd.$(wdKey));
const elem = $(wdKey);
return elem.isDisplayedInViewport();
});
var closeBtnSelector = wd.$(wdKey+".close-modal");
browser.click(closeBtnSelector);
const closeBtnSelector = $(wd.$(wdKey+".close-modal"));
closeBtnSelector.click();
browser.waitUntil(function() {
return !browser.isVisibleWithinViewport(wd.$(wdKey));
const elem = $(wdKey);
return !elem.isDisplayed();
});
}
@ -26,10 +28,12 @@ describe("modals", function() {
beforeEach(function() {
browser.url(config.baseUrl+"?debug");
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:open"))
const elem2 = $(wd.$("nav:open"));
elem2.click();
browser.flushReactUpdates();
});
@ -37,8 +41,10 @@ describe("modals", function() {
closeModal("open-modal");
});
it("upload", function() {
browser.waitForExist("*[type='file']")
// "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632
it.skip("upload", function() {
const elem = $("*[type='file']");
elem.waitForExist();
browser.chooseFile("*[type='file']", styleFilePath);
var styleObj = helper.getStyleStore(browser);
@ -50,8 +56,8 @@ describe("modals", function() {
browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl);
var selector = wd.$("open-modal.url.button");
browser.click(selector);
const selector = $(wd.$("open-modal.url.button"));
selector.click();
// Allow the network request to happen
// NOTE: Its localhost so this should be fast.
@ -70,10 +76,12 @@ describe("modals", function() {
beforeEach(function() {
browser.url(config.baseUrl+"?debug");
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:export"))
const elem2 = $(wd.$("nav:export"));
elem2.click();
browser.flushReactUpdates();
});
@ -99,9 +107,10 @@ describe("modals", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.acceptAlert();
browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
const selectBox = $(wd.$("nav:inspect", "select"));
selectBox.selectByAttribute('value', "inspect");
})
})
@ -109,16 +118,19 @@ describe("modals", function() {
beforeEach(function() {
browser.url(config.baseUrl+"?debug");
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:settings"))
const elem2 = $(wd.$("nav:settings"));
elem2.click();
browser.flushReactUpdates();
});
it("name", function() {
browser.setValueSafe(wd.$("modal-settings.name"), "foobar")
browser.click(wd.$("modal-settings.owner"))
const elem = $(wd.$("modal-settings.owner"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -126,7 +138,8 @@ describe("modals", function() {
})
it("owner", function() {
browser.setValueSafe(wd.$("modal-settings.owner"), "foobar")
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -134,7 +147,8 @@ describe("modals", function() {
})
it("sprite url", function() {
browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com")
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -143,7 +157,8 @@ describe("modals", function() {
it("glyphs url", function() {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
browser.setValueSafe(wd.$("modal-settings.glyphs"), glyphsUrl)
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -153,7 +168,8 @@ describe("modals", function() {
it("mapbox access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -165,7 +181,8 @@ describe("modals", function() {
it("maptiler access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -175,7 +192,8 @@ describe("modals", function() {
it("thunderforest access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:thunderforest_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -183,9 +201,10 @@ describe("modals", function() {
})
it("style renderer", function() {
var selector = wd.$("modal-settings.maputnik:renderer");
browser.selectByValue(selector, "ol");
browser.click(wd.$("modal-settings.name"))
const selector = $(wd.$("modal-settings.maputnik:renderer"));
selector.selectByAttribute('value', "ol");
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);

51
test/functional/screenshots/index.js
View file

@ -8,18 +8,16 @@ var wd = require("../../wd-helper");
describe('screenshots', function() {
beforeEach(function() {
browser.windowHandleSize({
width: 1280,
height: 800
});
browser.setWindowSize(1280, 800)
})
it("front_page", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/front_page.png")
@ -29,11 +27,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:open"))
const nav_open = $(wd.$("nav:open"));
nav_open.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/open.png")
@ -43,11 +43,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.click(wd.$("nav:export"))
const nav_export = $(wd.$("nav:export"));
nav_export.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/export.png")
@ -57,11 +59,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.click(wd.$("nav:sources"))
const nav_sources = $(wd.$("nav:sources"));
nav_sources.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/sources.png")
@ -71,11 +75,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.click(wd.$("nav:settings"))
const nav_settings = $(wd.$("nav:settings"));
nav_settings.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/settings.png")
@ -85,11 +91,14 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
const selectBox = $(wd.$("nav:inspect", "select"));
selectBox.selectByAttribute('value', 'inspect');
browser.flushReactUpdates();
browser.takeScreenShot("/inspect.png")

17
test/functional/util/webdriverio-ext.js
View file

@ -3,8 +3,8 @@ var fs = require("fs");
var path = require("path");
browser.timeoutsAsyncScript(20*1000);
browser.timeoutsImplicitWait(20*1000);
browser.setTimeout({ 'script': 20*1000 });
browser.setTimeout({ 'implicit': 20*1000 });
var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
@ -16,15 +16,18 @@ var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
try {
browser.addCommand('setValueSafe', function(selector, text) {
for(var i=0; i<10; i++) {
browser.waitForVisible(selector);
const elem = $(selector);
elem.waitForDisplayed(500);
var elements = browser.elements(selector);
var elements = browser.findElements("css selector", selector);
if(elements.length > 1) {
throw "Too many elements found";
}
browser.setValue(selector, text);
var browserText = browser.getValue(selector);
const elem2 = $(selector);
elem2.setValue(text);
var browserText = elem2.getValue();
if(browserText == text) {
return;
@ -39,7 +42,7 @@ try {
})
browser.addCommand('takeScreenShot', function(filepath) {
var data = browser.screenshot();
var data = browser.takeScreenshot();
fs.writeFileSync(path.join(SCREENSHOTS_PATH, filepath), data.value, 'base64');
});