mirror of
https://github.com/maputnik/editor.git
synced 2026-08-25 14:37:27 +00:00
Compare commits
61 Commits
aba3a95048
...
df12acf664
| Author | SHA1 | Date | |
|---|---|---|---|
 Birk Skyum
|
df12acf664 | ||
|
Birk Skyum
|
727bc7dfae | ||
 dependabot[bot]
|
0bbb04e4ff | ||
|
dependabot[bot]
|
4ea1958275 | ||
|
dependabot[bot]
|
db93ce1be1 | ||
|
dependabot[bot]
|
2d242c2a47 | ||
|
dependabot[bot]
|
1805763ba5 | ||
|
dependabot[bot]
|
499d183dcc | ||
|
dependabot[bot]
|
60c57135c4 | ||
|
dependabot[bot]
|
0098931748 | ||
|
dependabot[bot]
|
9067746fbd | ||
|
dependabot[bot]
|
a168b3a3b1 | ||
|
dependabot[bot]
|
c2f21364f2 | ||
|
dependabot[bot]
|
84452b555c | ||
|
dependabot[bot]
|
24445cc411 | ||
|
dependabot[bot]
|
3545264d69 | ||
|
dependabot[bot]
|
5870336c63 | ||
|
dependabot[bot]
|
751e92224c | ||
|
dependabot[bot]
|
8e19a63d30 | ||
|
dependabot[bot]
|
0c9870368e | ||
 Bart Louwers
|
b2fa703ceb | ||
|
dependabot[bot]
|
c1fde6f749 | ||
|
dependabot[bot]
|
0aa0c57fb2 | ||
|
Bart Louwers
|
3ddb55aec7 | ||
|
Bart Louwers
|
2fef0467b6 | ||
|
Bart Louwers
|
eb985f4d95 | ||
|
Bart Louwers
|
c486aa2139 | ||
|
Bart Louwers
|
244dbfb194 | ||
|
Bart Louwers
|
533f647c71 | ||
|
Bart Louwers
|
4b977fd33e | ||
|
Bart Louwers
|
e58b92b0cd | ||
|
dependabot[bot]
|
6de2705ac7 | ||
|
dependabot[bot]
|
f66ed31c85 | ||
|
Bart Louwers
|
599240033a | ||
|
dependabot[bot]
|
f5b7eccf52 | ||
|
dependabot[bot]
|
14032136a7 | ||
|
dependabot[bot]
|
2c12f00467 | ||
|
dependabot[bot]
|
516554fd82 | ||
|
dependabot[bot]
|
0b8dd230c6 | ||
|
dependabot[bot]
|
076013450e | ||
|
dependabot[bot]
|
af6fcff85c | ||
|
dependabot[bot]
|
42f5247c27 | ||
|
dependabot[bot]
|
f8e6bbf268 | ||
|
dependabot[bot]
|
0e24478c38 | ||
|
dependabot[bot]
|
61f867c7fa | ||
|
dependabot[bot]
|
71c04d7d2e | ||
|
dependabot[bot]
|
bdb0e0ef37 | ||
|
dependabot[bot]
|
ed97eed7e0 | ||
|
dependabot[bot]
|
4b0fb350b8 | ||
|
dependabot[bot]
|
806cefe98f | ||
|
dependabot[bot]
|
9b8668e559 | ||
|
dependabot[bot]
|
81368be140 | ||
|
dependabot[bot]
|
0aeda09475 | ||
|
dependabot[bot]
|
2df346d007 | ||
 huangli
|
851e4bad21 | ||
|
dependabot[bot]
|
3c72f20acb | ||
|
dependabot[bot]
|
01bd207940 | ||
|
dependabot[bot]
|
94ec946a31 | ||
|
dependabot[bot]
|
0d9b9748f8 | ||
|
dependabot[bot]
|
59b862a275 | ||
|
dependabot[bot]
|
c3cf10bab2 |
@@ -0,0 +1,47 @@
|
||||
Maputnik is a MapLibre style editor written using React and TypeScript.
|
||||
|
||||
To get started, install all npm packages:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Verify code correctness by running ESLint:
|
||||
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
Or try fixing lint issues with:
|
||||
|
||||
```
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
The project type checked and built with:
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To run the tests make sure that xvfb is installed:
|
||||
|
||||
```
|
||||
apt install xvfb
|
||||
```
|
||||
|
||||
Run the development server in the background with Vite:
|
||||
|
||||
```
|
||||
nohup npm run start &
|
||||
```
|
||||
|
||||
Then start the Cypress tests with:
|
||||
|
||||
```
|
||||
xvfb-run -a npm run test
|
||||
```
|
||||
|
||||
## Pull Requests
|
||||
|
||||
- Pull requests should update `CHANGELOG.md` with a short description of the change.
|
||||
@@ -11,11 +11,17 @@
|
||||
- Upgrade to MapLibre LG JS v5
|
||||
- Upgrade Vite 6 and Cypress 14 ([#970](https://github.com/maplibre/maputnik/pull/970))
|
||||
- Upgrade OpenLayers from v6 to v10
|
||||
- When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
|
||||
- Remove react-autobind dependency
|
||||
- Remove usage of legacy `childContextTypes` API
|
||||
- Refactor Field components to use arrow function syntax
|
||||
- Replace react-autocomplete with Downshift in the autocomplete component
|
||||
- _...Add new stuff here..._
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Fix incorrect handing of network error response (#944)
|
||||
- Show an error when adding a layer with a duplicate ID
|
||||
- _...Add new stuff here..._
|
||||
|
||||
## 2.1.1
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
FROM node:18 as builder
|
||||
FROM node:22 as builder
|
||||
WORKDIR /maputnik
|
||||
|
||||
# Only copy package.json to prevent npm install from running on every build
|
||||
|
||||
@@ -8,6 +8,7 @@ export default defineConfig({
|
||||
exclude: "cypress/**/*.*",
|
||||
},
|
||||
},
|
||||
|
||||
e2e: {
|
||||
setupNodeEvents(on, config) {
|
||||
// implement node event listeners here
|
||||
@@ -20,4 +21,11 @@ export default defineConfig({
|
||||
openMode: 0,
|
||||
},
|
||||
},
|
||||
|
||||
component: {
|
||||
devServer: {
|
||||
framework: "react",
|
||||
bundler: "vite",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -8,8 +8,10 @@ const baseUrl = "http://localhost:8888/";
|
||||
|
||||
const styleFromWindow = (win: Window) => {
|
||||
const styleId = win.localStorage.getItem("maputnik:latest_style");
|
||||
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
|
||||
const obj = JSON.parse(styleItem || "");
|
||||
const styleItemKey = `maputnik:style:${styleId}`;
|
||||
const styleItem = win.localStorage.getItem(styleItemKey);
|
||||
if (!styleItem) throw new Error("Could not get styleItem from localStorage");
|
||||
const obj = JSON.parse(styleItem);
|
||||
return obj;
|
||||
};
|
||||
|
||||
|
||||
@@ -272,7 +272,63 @@ describe("modals", () => {
|
||||
|
||||
});
|
||||
|
||||
describe("add layer", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("layer");
|
||||
when.modal.open();
|
||||
});
|
||||
|
||||
it("shows duplicate id error", () => {
|
||||
when.setValue("add-layer.layer-id.input", "background");
|
||||
when.click("add-layer");
|
||||
then(get.elementByTestId("modal:add-layer")).shouldExist();
|
||||
then(get.element(".maputnik-modal-error")).shouldContainText(
|
||||
"Layer ID already exists"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
it("toggle");
|
||||
});
|
||||
|
||||
describe("Handle localStorage QuotaExceededError", () => {
|
||||
it("handles quota exceeded error when opening style from URL", () => {
|
||||
// Clear localStorage to start fresh
|
||||
cy.clearLocalStorage();
|
||||
|
||||
// fill localStorage until we get a QuotaExceededError
|
||||
cy.window().then(win => {
|
||||
let chunkSize = 1000;
|
||||
const chunk = new Array(chunkSize).join("x");
|
||||
let index = 0;
|
||||
|
||||
// Keep adding until we hit the quota
|
||||
while (true) {
|
||||
try {
|
||||
const key = `maputnik:fill-${index++}`;
|
||||
win.localStorage.setItem(key, chunk);
|
||||
} catch (e: any) {
|
||||
// Verify it's a quota error
|
||||
if (e.name === 'QuotaExceededError') {
|
||||
if (chunkSize <= 1) return;
|
||||
else {
|
||||
chunkSize /= 2;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
throw e; // Unexpected error
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Open the style via URL input
|
||||
when.click("nav:open");
|
||||
when.setValue("modal:open.url.input", get.exampleFileUrl());
|
||||
when.click("modal:open.url.button");
|
||||
|
||||
then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
|
||||
then(get.styleFromLocalStorage()).shouldExist();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,12 +1,114 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": []
|
||||
"id": "test-style",
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mlgljs",
|
||||
"data": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17,
|
||||
18,
|
||||
19,
|
||||
20,
|
||||
21,
|
||||
22,
|
||||
23,
|
||||
24,
|
||||
25,
|
||||
26,
|
||||
27,
|
||||
28,
|
||||
29,
|
||||
30,
|
||||
31,
|
||||
32,
|
||||
33,
|
||||
34,
|
||||
35,
|
||||
36,
|
||||
37,
|
||||
38,
|
||||
39,
|
||||
40,
|
||||
41,
|
||||
42,
|
||||
43,
|
||||
44,
|
||||
45,
|
||||
46,
|
||||
47,
|
||||
48,
|
||||
49,
|
||||
50,
|
||||
51,
|
||||
52,
|
||||
53,
|
||||
54,
|
||||
55,
|
||||
56,
|
||||
57,
|
||||
58,
|
||||
59,
|
||||
60,
|
||||
61,
|
||||
62,
|
||||
63,
|
||||
64,
|
||||
65,
|
||||
66,
|
||||
67,
|
||||
68,
|
||||
69,
|
||||
70,
|
||||
71,
|
||||
72,
|
||||
73,
|
||||
74,
|
||||
75,
|
||||
76,
|
||||
77,
|
||||
78,
|
||||
79,
|
||||
80,
|
||||
81,
|
||||
82,
|
||||
83,
|
||||
84,
|
||||
85,
|
||||
86,
|
||||
87,
|
||||
88,
|
||||
89,
|
||||
90,
|
||||
91,
|
||||
92,
|
||||
93,
|
||||
94,
|
||||
95,
|
||||
96,
|
||||
97,
|
||||
98,
|
||||
99
|
||||
]
|
||||
},
|
||||
"sources": {},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": []
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
// ***********************************************************
|
||||
// This example support/component.ts is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
import { mount } from 'cypress/react'
|
||||
|
||||
// Augment the Cypress namespace to include type definitions for
|
||||
// your custom command.
|
||||
// Alternatively, can be defined in cypress/support/component.d.ts
|
||||
// with a <reference path="./component" /> at the top of your spec.
|
||||
declare global {
|
||||
/* eslint-disable @typescript-eslint/no-namespace */
|
||||
namespace Cypress {
|
||||
interface Chainable {
|
||||
mount: typeof mount
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Cypress.Commands.add('mount', mount)
|
||||
|
||||
// Example use:
|
||||
// cy.mount(<MyComponent />)
|
||||
Generated
+456
-641
File diff suppressed because it is too large
Load Diff
+17
-19
@@ -38,8 +38,8 @@
|
||||
"detect-browser": "^5.3.0",
|
||||
"events": "^3.3.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"i18next": "^25.2.1",
|
||||
"i18next-browser-languagedetector": "^8.1.0",
|
||||
"i18next": "^25.3.2",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"i18next-resources-to-backend": "^1.2.1",
|
||||
"json-stringify-pretty-compact": "^4.0.0",
|
||||
"json-to-ast": "^2.1.0",
|
||||
@@ -52,7 +52,7 @@
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"maplibre-gl": "^5.5.0",
|
||||
"maputnik-design": "github:maputnik/design#172b06c",
|
||||
"ol": "^10.5.0",
|
||||
"ol": "^10.6.1",
|
||||
"ol-mapbox-style": "^13.0.1",
|
||||
"pmtiles": "^4.3.0",
|
||||
"prop-types": "^15.8.1",
|
||||
@@ -60,13 +60,12 @@
|
||||
"react-accessible-accordion": "^5.0.1",
|
||||
"react-aria-menubutton": "^7.0.3",
|
||||
"react-aria-modal": "^5.0.2",
|
||||
"react-autobind": "^1.0.6",
|
||||
"react-autocomplete": "^1.8.1",
|
||||
"downshift": "^9.0.10",
|
||||
"react-collapse": "^5.1.1",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-file-reader-input": "^2.0.0",
|
||||
"react-i18next": "^15.5.2",
|
||||
"react-i18next": "^15.6.1",
|
||||
"react-icon-base": "^2.1.2",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-sortable-hoc": "^2.0.0",
|
||||
@@ -93,11 +92,11 @@
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/code-coverage": "^3.14.4",
|
||||
"@eslint/js": "^9.28.0",
|
||||
"@cypress/code-coverage": "^3.14.5",
|
||||
"@eslint/js": "^9.32.0",
|
||||
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"@shellygo/cypress-test-utils": "^5.0.0",
|
||||
"@shellygo/cypress-test-utils": "^5.0.2",
|
||||
"@types/codemirror": "^5.60.15",
|
||||
"@types/color": "^4.2.0",
|
||||
"@types/cors": "^2.8.19",
|
||||
@@ -114,7 +113,6 @@
|
||||
"@types/react": "^18.2.67",
|
||||
"@types/react-aria-menubutton": "^6.2.14",
|
||||
"@types/react-aria-modal": "^5.0.0",
|
||||
"@types/react-autocomplete": "^1.8.11",
|
||||
"@types/react-collapse": "^5.0.4",
|
||||
"@types/react-color": "^3.0.13",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
@@ -123,27 +121,27 @@
|
||||
"@types/string-hash": "^1.1.3",
|
||||
"@types/uuid": "^10.0.0",
|
||||
"@types/wicg-file-system-access": "^2023.10.6",
|
||||
"@vitejs/plugin-react": "^4.5.1",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"cors": "^2.8.5",
|
||||
"cypress": "^14.4.1",
|
||||
"cypress": "^14.5.3",
|
||||
"cypress-plugin-tab": "^1.0.5",
|
||||
"eslint": "^9.28.0",
|
||||
"eslint": "^9.32.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"i18next-parser": "^9.3.0",
|
||||
"istanbul": "^0.4.5",
|
||||
"istanbul-lib-coverage": "^3.2.2",
|
||||
"postcss": "^8.5.4",
|
||||
"postcss": "^8.5.6",
|
||||
"react-hot-loader": "^4.13.1",
|
||||
"sass": "^1.89.1",
|
||||
"stylelint": "^16.20.0",
|
||||
"sass": "^1.90.0",
|
||||
"stylelint": "^16.23.0",
|
||||
"stylelint-config-recommended-scss": "^15.0.1",
|
||||
"stylelint-scss": "^6.12.0",
|
||||
"stylelint-scss": "^6.12.1",
|
||||
"typescript": "^5.8.3",
|
||||
"typescript-eslint": "^8.33.1",
|
||||
"typescript-eslint": "^8.38.0",
|
||||
"uuid": "^11.1.0",
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-istanbul": "^7.0.0"
|
||||
"vite-plugin-istanbul": "^7.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
// @ts-ignore - this can be easily replaced with arrow functions
|
||||
import autoBind from 'react-autobind';
|
||||
import React from 'react'
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
import clamp from 'lodash.clamp'
|
||||
@@ -140,7 +138,6 @@ export default class App extends React.Component<any, AppState> {
|
||||
|
||||
constructor(props: any) {
|
||||
super(props)
|
||||
autoBind(this);
|
||||
|
||||
this.revisionStore = new RevisionStore()
|
||||
const params = new URLSearchParams(window.location.search.substring(1))
|
||||
@@ -880,8 +877,8 @@ export default class App extends React.Component<any, AppState> {
|
||||
this.setModal(modalName, !this.state.isOpen[modalName]);
|
||||
}
|
||||
|
||||
onSetFileHandle(fileHandle: FileSystemFileHandle | null) {
|
||||
this.setState({fileHandle: fileHandle});
|
||||
onSetFileHandle = (fileHandle: FileSystemFileHandle | null) => {
|
||||
this.setState({ fileHandle });
|
||||
}
|
||||
|
||||
onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import ScrollContainer from './ScrollContainer'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { IconContext } from 'react-icons';
|
||||
|
||||
type AppLayoutInternalProps = {
|
||||
toolbar: React.ReactElement
|
||||
@@ -13,38 +13,31 @@ type AppLayoutInternalProps = {
|
||||
} & WithTranslation;
|
||||
|
||||
class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
|
||||
static childContextTypes = {
|
||||
reactIconBase: PropTypes.object
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
reactIconBase: { size: 14 }
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
document.body.dir = this.props.i18n.dir();
|
||||
|
||||
return <div className="maputnik-layout">
|
||||
{this.props.toolbar}
|
||||
<div className="maputnik-layout-main">
|
||||
<div className="maputnik-layout-list">
|
||||
{this.props.layerList}
|
||||
return <IconContext.Provider value={{size: '14px'}}>
|
||||
<div className="maputnik-layout">
|
||||
{this.props.toolbar}
|
||||
<div className="maputnik-layout-main">
|
||||
<div className="maputnik-layout-list">
|
||||
{this.props.layerList}
|
||||
</div>
|
||||
<div className="maputnik-layout-drawer">
|
||||
<ScrollContainer>
|
||||
{this.props.layerEditor}
|
||||
</ScrollContainer>
|
||||
</div>
|
||||
{this.props.map}
|
||||
</div>
|
||||
<div className="maputnik-layout-drawer">
|
||||
<ScrollContainer>
|
||||
{this.props.layerEditor}
|
||||
</ScrollContainer>
|
||||
{this.props.bottom && <div className="maputnik-layout-bottom">
|
||||
{this.props.bottom}
|
||||
</div>
|
||||
{this.props.map}
|
||||
}
|
||||
{this.props.modals}
|
||||
</div>
|
||||
{this.props.bottom && <div className="maputnik-layout-bottom">
|
||||
{this.props.bottom}
|
||||
</div>
|
||||
}
|
||||
{this.props.modals}
|
||||
</div>
|
||||
</IconContext.Provider>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
|
||||
import Fieldset from './Fieldset'
|
||||
|
||||
@@ -9,10 +8,12 @@ type FieldArrayProps = InputArrayProps & {
|
||||
}
|
||||
};
|
||||
|
||||
export default class FieldArray extends React.Component<FieldArrayProps> {
|
||||
render() {
|
||||
return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
|
||||
<InputArray {...this.props} />
|
||||
const FieldArray: React.FC<FieldArrayProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputArray {...props} />
|
||||
</Fieldset>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldArray;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import Block from './Block'
|
||||
import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
|
||||
|
||||
@@ -8,10 +7,12 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
|
||||
render() {
|
||||
return <Block label={this.props.label}>
|
||||
<InputAutocomplete {...this.props} />
|
||||
const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label}>
|
||||
<InputAutocomplete {...props} />
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldAutocomplete;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import Block from './Block'
|
||||
import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
|
||||
|
||||
@@ -8,10 +7,12 @@ type FieldCheckboxProps = InputCheckboxProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
|
||||
render() {
|
||||
return <Block label={this.props.label}>
|
||||
<InputCheckbox {...this.props} />
|
||||
const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label}>
|
||||
<InputCheckbox {...props} />
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldCheckbox;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import Block from './Block'
|
||||
import InputColor, {InputColorProps} from './InputColor'
|
||||
|
||||
@@ -11,10 +10,12 @@ type FieldColorProps = InputColorProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldColor extends React.Component<FieldColorProps> {
|
||||
render() {
|
||||
return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
|
||||
<InputColor {...this.props} />
|
||||
const FieldColor: React.FC<FieldColorProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputColor {...props} />
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldColor;
|
||||
|
||||
@@ -10,29 +10,31 @@ type FieldCommentInternalProps = {
|
||||
error: {message: string}
|
||||
} & WithTranslation;
|
||||
|
||||
class FieldCommentInternal extends React.Component<FieldCommentInternalProps> {
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
const fieldSpec = {
|
||||
doc: t("Comments for the current layer. This is non-standard and not in the spec."),
|
||||
};
|
||||
const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
const fieldSpec = {
|
||||
doc: t(
|
||||
"Comments for the current layer. This is non-standard and not in the spec."
|
||||
),
|
||||
};
|
||||
|
||||
return <Block
|
||||
return (
|
||||
<Block
|
||||
label={t("Comments")}
|
||||
fieldSpec={fieldSpec}
|
||||
data-wd-key="layer-comment"
|
||||
error={this.props.error}
|
||||
error={props.error}
|
||||
>
|
||||
<InputString
|
||||
multi={true}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
default={t("Comment...")}
|
||||
data-wd-key="layer-comment.input"
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const FieldComment = withTranslation()(FieldCommentInternal);
|
||||
export default FieldComment;
|
||||
|
||||
@@ -9,57 +9,45 @@ type FieldDocLabelProps = {
|
||||
onToggleDoc?(...args: unknown[]): unknown
|
||||
};
|
||||
|
||||
type FieldDocLabelState = {
|
||||
open: boolean
|
||||
};
|
||||
|
||||
export default class FieldDocLabel extends React.Component<FieldDocLabelProps, FieldDocLabelState> {
|
||||
constructor (props: FieldDocLabelProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
open: false,
|
||||
const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const onToggleDoc = (state: boolean) => {
|
||||
setOpen(state);
|
||||
if (props.onToggleDoc) {
|
||||
props.onToggleDoc(state);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onToggleDoc = (open: boolean) => {
|
||||
this.setState({
|
||||
open,
|
||||
}, () => {
|
||||
if (this.props.onToggleDoc) {
|
||||
this.props.onToggleDoc(this.state.open);
|
||||
}
|
||||
});
|
||||
}
|
||||
const { label, fieldSpec } = props;
|
||||
const { doc } = fieldSpec || {};
|
||||
|
||||
render() {
|
||||
const {label, fieldSpec} = this.props;
|
||||
const {doc} = fieldSpec || {};
|
||||
|
||||
if (doc) {
|
||||
return <label className="maputnik-doc-wrapper">
|
||||
if (doc) {
|
||||
return (
|
||||
<label className="maputnik-doc-wrapper">
|
||||
<div className="maputnik-doc-target">
|
||||
{label}
|
||||
{'\xa0'}
|
||||
<button
|
||||
aria-label={this.state.open ? "close property documentation" : "open property documentation"}
|
||||
className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
|
||||
onClick={() => this.onToggleDoc(!this.state.open)}
|
||||
data-wd-key={'field-doc-button-'+label}
|
||||
aria-label={open ? 'close property documentation' : 'open property documentation'}
|
||||
className={`maputnik-doc-button maputnik-doc-button--${open ? 'open' : 'closed'}`}
|
||||
onClick={() => onToggleDoc(!open)}
|
||||
data-wd-key={'field-doc-button-' + label}
|
||||
>
|
||||
{this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
|
||||
{open ? <MdHighlightOff /> : <MdInfoOutline />}
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
}
|
||||
else if (label) {
|
||||
return <label className="maputnik-doc-wrapper">
|
||||
<div className="maputnik-doc-target">
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
} else if (label) {
|
||||
return (
|
||||
<label className="maputnik-doc-wrapper">
|
||||
<div className="maputnik-doc-target">{label}</div>
|
||||
</label>
|
||||
}
|
||||
else {
|
||||
<div />
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
return <div />;
|
||||
};
|
||||
|
||||
export default FieldDocLabel;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
|
||||
import Fieldset from './Fieldset'
|
||||
|
||||
@@ -6,10 +5,12 @@ type FieldDynamicArrayProps = InputDynamicArrayProps & {
|
||||
name?: string
|
||||
};
|
||||
|
||||
export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
|
||||
render() {
|
||||
return <Fieldset label={this.props.label}>
|
||||
<InputDynamicArray {...this.props} />
|
||||
const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label}>
|
||||
<InputDynamicArray {...props} />
|
||||
</Fieldset>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldDynamicArray;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import InputEnum, {InputEnumProps} from './InputEnum'
|
||||
import Fieldset from './Fieldset';
|
||||
|
||||
@@ -11,10 +10,12 @@ type FieldEnumProps = InputEnumProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldEnum extends React.Component<FieldEnumProps> {
|
||||
render() {
|
||||
return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
|
||||
<InputEnum {...this.props} />
|
||||
const FieldEnum: React.FC<FieldEnumProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputEnum {...props} />
|
||||
</Fieldset>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldEnum;
|
||||
|
||||
+188
-216
@@ -111,296 +111,268 @@ type FieldFunctionProps = {
|
||||
value?: any
|
||||
};
|
||||
|
||||
type FieldFunctionState = {
|
||||
dataType: string
|
||||
isEditing: boolean
|
||||
}
|
||||
|
||||
/** Supports displaying spec field for zoom function objects
|
||||
* https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
|
||||
*/
|
||||
export default class FieldFunction extends React.Component<FieldFunctionProps, FieldFunctionState> {
|
||||
constructor (props: FieldFunctionProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataType: getDataType(props.value, props.fieldSpec),
|
||||
isEditing: false,
|
||||
}
|
||||
}
|
||||
const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
const [dataType, setDataType] = React.useState(
|
||||
getDataType(props.value, props.fieldSpec)
|
||||
);
|
||||
const [isEditing, setIsEditing] = React.useState(false);
|
||||
|
||||
static getDerivedStateFromProps(props: Readonly<FieldFunctionProps>, state: FieldFunctionState) {
|
||||
// Because otherwise when editing values we end up accidentally changing field type.
|
||||
if (state.isEditing) {
|
||||
return {};
|
||||
React.useEffect(() => {
|
||||
if (!isEditing) {
|
||||
setDataType(getDataType(props.value, props.fieldSpec));
|
||||
}
|
||||
else {
|
||||
return {
|
||||
isEditing: false,
|
||||
dataType: getDataType(props.value, props.fieldSpec)
|
||||
};
|
||||
}
|
||||
}
|
||||
}, [props.value, props.fieldSpec, isEditing]);
|
||||
|
||||
getFieldFunctionType(fieldSpec: any) {
|
||||
const getFieldFunctionType = (fieldSpec: any) => {
|
||||
if (fieldSpec.expression.interpolated) {
|
||||
return "exponential"
|
||||
return 'exponential';
|
||||
}
|
||||
if (fieldSpec.type === "number") {
|
||||
return "interval"
|
||||
if (fieldSpec.type === 'number') {
|
||||
return 'interval';
|
||||
}
|
||||
return "categorical"
|
||||
}
|
||||
return 'categorical';
|
||||
};
|
||||
|
||||
addStop = () => {
|
||||
const stops = this.props.value.stops.slice(0)
|
||||
const lastStop = stops[stops.length - 1]
|
||||
if (typeof lastStop[0] === "object") {
|
||||
const addStop = () => {
|
||||
const stops = props.value.stops.slice(0);
|
||||
const lastStop = stops[stops.length - 1];
|
||||
if (typeof lastStop[0] === 'object') {
|
||||
stops.push([
|
||||
{zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
|
||||
lastStop[1]
|
||||
])
|
||||
}
|
||||
else {
|
||||
stops.push([lastStop[0] + 1, lastStop[1]])
|
||||
{ zoom: lastStop[0].zoom + 1, value: lastStop[0].value },
|
||||
lastStop[1],
|
||||
]);
|
||||
} else {
|
||||
stops.push([lastStop[0] + 1, lastStop[1]]);
|
||||
}
|
||||
|
||||
const changedValue = {
|
||||
...this.props.value,
|
||||
...props.value,
|
||||
stops: stops,
|
||||
}
|
||||
};
|
||||
|
||||
this.props.onChange(this.props.fieldName, changedValue)
|
||||
}
|
||||
props.onChange(props.fieldName, changedValue);
|
||||
};
|
||||
|
||||
deleteExpression = () => {
|
||||
const {fieldSpec, fieldName} = this.props;
|
||||
this.props.onChange(fieldName, fieldSpec.default);
|
||||
this.setState({
|
||||
dataType: "value",
|
||||
});
|
||||
}
|
||||
const deleteExpression = () => {
|
||||
const { fieldSpec, fieldName } = props;
|
||||
props.onChange(fieldName, fieldSpec.default);
|
||||
setDataType('value');
|
||||
};
|
||||
|
||||
deleteStop = (stopIdx: number) => {
|
||||
const stops = this.props.value.stops.slice(0)
|
||||
stops.splice(stopIdx, 1)
|
||||
const deleteStop = (stopIdx: number) => {
|
||||
const stops = props.value.stops.slice(0);
|
||||
stops.splice(stopIdx, 1);
|
||||
|
||||
let changedValue = {
|
||||
...this.props.value,
|
||||
let changedValue: any = {
|
||||
...props.value,
|
||||
stops: stops,
|
||||
};
|
||||
|
||||
if (stops.length === 1) {
|
||||
changedValue = stops[0][1];
|
||||
}
|
||||
|
||||
if(stops.length === 1) {
|
||||
changedValue = stops[0][1]
|
||||
}
|
||||
props.onChange(props.fieldName, changedValue);
|
||||
};
|
||||
|
||||
this.props.onChange(this.props.fieldName, changedValue)
|
||||
}
|
||||
const makeZoomFunction = () => {
|
||||
const { value } = props;
|
||||
|
||||
makeZoomFunction = () => {
|
||||
const {value} = this.props;
|
||||
|
||||
let zoomFunc;
|
||||
if (typeof(value) === "object") {
|
||||
let zoomFunc: any;
|
||||
if (typeof value === 'object') {
|
||||
if (value.stops) {
|
||||
zoomFunc = {
|
||||
base: value.base,
|
||||
stops: value.stops.map((stop: Stop) => {
|
||||
return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
|
||||
})
|
||||
}
|
||||
}
|
||||
else {
|
||||
return [stop[0].zoom, stop[1] || findDefaultFromSpec(props.fieldSpec)];
|
||||
}),
|
||||
};
|
||||
} else {
|
||||
zoomFunc = {
|
||||
base: value.base,
|
||||
stops: [
|
||||
[6, findDefaultFromSpec(this.props.fieldSpec)],
|
||||
[10, findDefaultFromSpec(this.props.fieldSpec)]
|
||||
]
|
||||
}
|
||||
[6, findDefaultFromSpec(props.fieldSpec)],
|
||||
[10, findDefaultFromSpec(props.fieldSpec)],
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
zoomFunc = {
|
||||
stops: [
|
||||
[6, value || findDefaultFromSpec(this.props.fieldSpec)],
|
||||
[10, value || findDefaultFromSpec(this.props.fieldSpec)]
|
||||
]
|
||||
}
|
||||
[6, value || findDefaultFromSpec(props.fieldSpec)],
|
||||
[10, value || findDefaultFromSpec(props.fieldSpec)],
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
this.props.onChange(this.props.fieldName, zoomFunc)
|
||||
}
|
||||
props.onChange(props.fieldName, zoomFunc);
|
||||
};
|
||||
|
||||
undoExpression = () => {
|
||||
const {value, fieldName} = this.props;
|
||||
const undoExpression = () => {
|
||||
const { value, fieldName } = props;
|
||||
|
||||
if (isGetExpression(value)) {
|
||||
this.props.onChange(fieldName, {
|
||||
"type": "identity",
|
||||
"property": value[1]
|
||||
});
|
||||
this.setState({
|
||||
dataType: "value",
|
||||
props.onChange(fieldName, {
|
||||
type: 'identity',
|
||||
property: value[1],
|
||||
});
|
||||
setDataType('value');
|
||||
} else if (isLiteralExpression(value)) {
|
||||
props.onChange(fieldName, value[1]);
|
||||
setDataType('value');
|
||||
}
|
||||
else if (isLiteralExpression(value)) {
|
||||
this.props.onChange(fieldName, value[1]);
|
||||
this.setState({
|
||||
dataType: "value",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
canUndo = () => {
|
||||
const {value, fieldSpec} = this.props;
|
||||
const canUndo = () => {
|
||||
const { value, fieldSpec } = props;
|
||||
return (
|
||||
isGetExpression(value) ||
|
||||
isLiteralExpression(value) ||
|
||||
isPrimative(value) ||
|
||||
(Array.isArray(value) && fieldSpec.type === "array")
|
||||
(Array.isArray(value) && fieldSpec.type === 'array')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
makeExpression = () => {
|
||||
const {value, fieldSpec} = this.props;
|
||||
const makeExpression = () => {
|
||||
const { value, fieldSpec } = props;
|
||||
let expression;
|
||||
|
||||
if (typeof(value) === "object" && 'stops' in value) {
|
||||
if (typeof value === 'object' && 'stops' in value) {
|
||||
expression = styleFunction.convertFunction(value, fieldSpec);
|
||||
} else if (isIdentityProperty(value)) {
|
||||
expression = ['get', value.property];
|
||||
} else {
|
||||
expression = ['literal', value || props.fieldSpec.default];
|
||||
}
|
||||
else if (isIdentityProperty(value)) {
|
||||
expression = ["get", value.property];
|
||||
}
|
||||
else {
|
||||
expression = ["literal", value || this.props.fieldSpec.default];
|
||||
}
|
||||
this.props.onChange(this.props.fieldName, expression);
|
||||
}
|
||||
props.onChange(props.fieldName, expression);
|
||||
};
|
||||
|
||||
makeDataFunction = () => {
|
||||
const functionType = this.getFieldFunctionType(this.props.fieldSpec);
|
||||
const makeDataFunction = () => {
|
||||
const functionType = getFieldFunctionType(props.fieldSpec);
|
||||
const stopValue = functionType === 'categorical' ? '' : 0;
|
||||
const {value} = this.props;
|
||||
const { value } = props;
|
||||
let dataFunc;
|
||||
|
||||
if (typeof(value) === "object") {
|
||||
if (typeof value === 'object') {
|
||||
if (value.stops) {
|
||||
dataFunc = {
|
||||
property: "",
|
||||
property: '',
|
||||
type: functionType,
|
||||
base: value.base,
|
||||
stops: value.stops.map((stop: Stop) => {
|
||||
return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
|
||||
})
|
||||
}
|
||||
}
|
||||
else {
|
||||
return [{ zoom: stop[0], value: stopValue }, stop[1] || findDefaultFromSpec(props.fieldSpec)];
|
||||
}),
|
||||
};
|
||||
} else {
|
||||
dataFunc = {
|
||||
property: "",
|
||||
property: '',
|
||||
type: functionType,
|
||||
base: value.base,
|
||||
stops: [
|
||||
[{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
|
||||
[{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
|
||||
]
|
||||
}
|
||||
[{ zoom: 6, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
|
||||
[{ zoom: 10, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
dataFunc = {
|
||||
property: "",
|
||||
property: '',
|
||||
type: functionType,
|
||||
base: value.base,
|
||||
stops: [
|
||||
[{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
|
||||
[{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
|
||||
]
|
||||
}
|
||||
[{ zoom: 6, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
|
||||
[{ zoom: 10, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
this.props.onChange(this.props.fieldName, dataFunc)
|
||||
props.onChange(props.fieldName, dataFunc);
|
||||
};
|
||||
|
||||
const onMarkEditing = () => {
|
||||
setIsEditing(true);
|
||||
};
|
||||
|
||||
const onUnmarkEditing = () => {
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const propClass =
|
||||
props.fieldSpec.default === props.value ? 'maputnik-default-property' : 'maputnik-modified-property';
|
||||
|
||||
let specField;
|
||||
|
||||
if (dataType === 'expression') {
|
||||
specField = (
|
||||
<ExpressionProperty
|
||||
errors={props.errors}
|
||||
onChange={props.onChange.bind(null, props.fieldName)}
|
||||
canUndo={canUndo}
|
||||
onUndo={undoExpression}
|
||||
onDelete={deleteExpression}
|
||||
fieldType={props.fieldType}
|
||||
fieldName={props.fieldName}
|
||||
fieldSpec={props.fieldSpec}
|
||||
value={props.value}
|
||||
onFocus={onMarkEditing}
|
||||
onBlur={onUnmarkEditing}
|
||||
/>
|
||||
);
|
||||
} else if (dataType === 'zoom_function') {
|
||||
specField = (
|
||||
<ZoomProperty
|
||||
errors={props.errors}
|
||||
onChange={props.onChange.bind(null)}
|
||||
fieldType={props.fieldType}
|
||||
fieldName={props.fieldName}
|
||||
fieldSpec={props.fieldSpec}
|
||||
value={props.value}
|
||||
onDeleteStop={deleteStop}
|
||||
onAddStop={addStop}
|
||||
onChangeToDataFunction={makeDataFunction}
|
||||
onExpressionClick={makeExpression}
|
||||
/>
|
||||
);
|
||||
} else if (dataType === 'data_function') {
|
||||
specField = (
|
||||
<DataProperty
|
||||
errors={props.errors}
|
||||
onChange={props.onChange.bind(null)}
|
||||
fieldType={props.fieldType}
|
||||
fieldName={props.fieldName}
|
||||
fieldSpec={props.fieldSpec}
|
||||
value={props.value}
|
||||
onDeleteStop={deleteStop}
|
||||
onAddStop={addStop}
|
||||
onChangeToZoomFunction={makeZoomFunction}
|
||||
onExpressionClick={makeExpression}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
specField = (
|
||||
<SpecProperty
|
||||
errors={props.errors}
|
||||
onChange={props.onChange.bind(null)}
|
||||
fieldType={props.fieldType}
|
||||
fieldName={props.fieldName}
|
||||
fieldSpec={props.fieldSpec}
|
||||
value={props.value}
|
||||
onZoomClick={makeZoomFunction}
|
||||
onDataClick={makeDataFunction}
|
||||
onExpressionClick={makeExpression}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
onMarkEditing = () => {
|
||||
this.setState({isEditing: true});
|
||||
}
|
||||
|
||||
onUnmarkEditing = () => {
|
||||
this.setState({isEditing: false});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {dataType} = this.state;
|
||||
const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
|
||||
let specField;
|
||||
|
||||
if (dataType === "expression") {
|
||||
specField = (
|
||||
<ExpressionProperty
|
||||
errors={this.props.errors}
|
||||
onChange={this.props.onChange.bind(this, this.props.fieldName)}
|
||||
canUndo={this.canUndo}
|
||||
onUndo={this.undoExpression}
|
||||
onDelete={this.deleteExpression}
|
||||
fieldType={this.props.fieldType}
|
||||
fieldName={this.props.fieldName}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
value={this.props.value}
|
||||
onFocus={this.onMarkEditing}
|
||||
onBlur={this.onUnmarkEditing}
|
||||
/>
|
||||
);
|
||||
}
|
||||
else if (dataType === "zoom_function") {
|
||||
specField = (
|
||||
<ZoomProperty
|
||||
errors={this.props.errors}
|
||||
onChange={this.props.onChange.bind(this)}
|
||||
fieldType={this.props.fieldType}
|
||||
fieldName={this.props.fieldName}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
value={this.props.value}
|
||||
onDeleteStop={this.deleteStop}
|
||||
onAddStop={this.addStop}
|
||||
onChangeToDataFunction={this.makeDataFunction}
|
||||
onExpressionClick={this.makeExpression}
|
||||
/>
|
||||
)
|
||||
}
|
||||
else if (dataType === "data_function") {
|
||||
// TODO: Rename to FieldFunction **this file** shouldn't be called that
|
||||
specField = (
|
||||
<DataProperty
|
||||
errors={this.props.errors}
|
||||
onChange={this.props.onChange.bind(this)}
|
||||
fieldType={this.props.fieldType}
|
||||
fieldName={this.props.fieldName}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
value={this.props.value}
|
||||
onDeleteStop={this.deleteStop}
|
||||
onAddStop={this.addStop}
|
||||
onChangeToZoomFunction={this.makeZoomFunction}
|
||||
onExpressionClick={this.makeExpression}
|
||||
/>
|
||||
)
|
||||
}
|
||||
else {
|
||||
specField = (
|
||||
<SpecProperty
|
||||
errors={this.props.errors}
|
||||
onChange={this.props.onChange.bind(this)}
|
||||
fieldType={this.props.fieldType}
|
||||
fieldName={this.props.fieldName}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
value={this.props.value}
|
||||
onZoomClick={this.makeZoomFunction}
|
||||
onDataClick={this.makeDataFunction}
|
||||
onExpressionClick={this.makeExpression}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <div className={propClass} data-wd-key={"spec-field-container:"+this.props.fieldName}>
|
||||
return (
|
||||
<div className={propClass} data-wd-key={'spec-field-container:' + props.fieldName}>
|
||||
{specField}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldFunction;
|
||||
|
||||
+12
-12
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import Block from './Block'
|
||||
@@ -11,18 +10,19 @@ type FieldIdProps = {
|
||||
error?: {message: string}
|
||||
};
|
||||
|
||||
export default class FieldId extends React.Component<FieldIdProps> {
|
||||
render() {
|
||||
return <Block label="ID" fieldSpec={latest.layer.id}
|
||||
|
||||
data-wd-key={this.props.wdKey}
|
||||
error={this.props.error}
|
||||
const FieldId: React.FC<FieldIdProps> = (props) => {
|
||||
return (
|
||||
<Block label="ID" fieldSpec={latest.layer.id}
|
||||
data-wd-key={props.wdKey}
|
||||
error={props.error}
|
||||
>
|
||||
<InputString
|
||||
value={this.props.value}
|
||||
onInput={this.props.onChange}
|
||||
data-wd-key={this.props.wdKey + ".input"}
|
||||
value={props.value}
|
||||
onInput={props.onChange}
|
||||
data-wd-key={props.wdKey + ".input"}
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldId;
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import React from 'react'
|
||||
import InputJson, {InputJsonProps} from './InputJson'
|
||||
|
||||
|
||||
type FieldJsonProps = InputJsonProps & {};
|
||||
|
||||
|
||||
export default class FieldJson extends React.Component<FieldJsonProps> {
|
||||
render() {
|
||||
return <InputJson {...this.props} />
|
||||
}
|
||||
}
|
||||
const FieldJson: React.FC<FieldJsonProps> = (props) => {
|
||||
return <InputJson {...props} />;
|
||||
};
|
||||
|
||||
export default FieldJson;
|
||||
|
||||
@@ -11,25 +11,25 @@ type FieldMaxZoomInternalProps = {
|
||||
error?: {message: string}
|
||||
} & WithTranslation;
|
||||
|
||||
class FieldMaxZoomInternal extends React.Component<FieldMaxZoomInternalProps> {
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
|
||||
error={this.props.error}
|
||||
const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
return (
|
||||
<Block label={t('Max Zoom')} fieldSpec={latest.layer.maxzoom}
|
||||
error={props.error}
|
||||
data-wd-key="max-zoom"
|
||||
>
|
||||
<InputNumber
|
||||
allowRange={true}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
min={latest.layer.maxzoom.minimum}
|
||||
max={latest.layer.maxzoom.maximum}
|
||||
default={latest.layer.maxzoom.maximum}
|
||||
data-wd-key="max-zoom.input"
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
|
||||
export default FieldMaxZoom;
|
||||
|
||||
@@ -11,25 +11,25 @@ type FieldMinZoomInternalProps = {
|
||||
error?: {message: string}
|
||||
} & WithTranslation;
|
||||
|
||||
class FieldMinZoomInternal extends React.Component<FieldMinZoomInternalProps> {
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
|
||||
error={this.props.error}
|
||||
const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
return (
|
||||
<Block label={t('Min Zoom')} fieldSpec={latest.layer.minzoom}
|
||||
error={props.error}
|
||||
data-wd-key="min-zoom"
|
||||
>
|
||||
<InputNumber
|
||||
allowRange={true}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
min={latest.layer.minzoom.minimum}
|
||||
max={latest.layer.minzoom.maximum}
|
||||
default={latest.layer.minzoom.minimum}
|
||||
data-wd-key='min-zoom.input'
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
|
||||
export default FieldMinZoom;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
|
||||
import Fieldset from './Fieldset'
|
||||
|
||||
@@ -8,10 +7,12 @@ type FieldMultiInputProps = InputMultiInputProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldMultiInput extends React.Component<FieldMultiInputProps> {
|
||||
render() {
|
||||
return <Fieldset label={this.props.label}>
|
||||
<InputMultiInput {...this.props} />
|
||||
const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
|
||||
return (
|
||||
<Fieldset label={props.label}>
|
||||
<InputMultiInput {...props} />
|
||||
</Fieldset>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldMultiInput;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import InputNumber, {InputNumberProps} from './InputNumber'
|
||||
import Block from './Block'
|
||||
|
||||
@@ -11,10 +10,12 @@ type FieldNumberProps = InputNumberProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldNumber extends React.Component<FieldNumberProps> {
|
||||
render() {
|
||||
return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
|
||||
<InputNumber {...this.props} />
|
||||
const FieldNumber: React.FC<FieldNumberProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputNumber {...props} />
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldNumber;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import Block from './Block'
|
||||
import InputSelect, {InputSelectProps} from './InputSelect'
|
||||
|
||||
@@ -11,10 +10,12 @@ type FieldSelectProps = InputSelectProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldSelect extends React.Component<FieldSelectProps> {
|
||||
render() {
|
||||
return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
|
||||
<InputSelect {...this.props}/>
|
||||
const FieldSelect: React.FC<FieldSelectProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputSelect {...props} />
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldSelect;
|
||||
|
||||
@@ -13,28 +13,28 @@ type FieldSourceInternalProps = {
|
||||
error?: {message: string}
|
||||
} & WithTranslation;
|
||||
|
||||
class FieldSourceInternal extends React.Component<FieldSourceInternalProps> {
|
||||
static defaultProps = {
|
||||
onChange: () => {},
|
||||
sourceIds: [],
|
||||
}
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <Block
|
||||
label={t("Source")}
|
||||
const FieldSourceInternal: React.FC<FieldSourceInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
return (
|
||||
<Block
|
||||
label={t('Source')}
|
||||
fieldSpec={latest.layer.source}
|
||||
error={this.props.error}
|
||||
data-wd-key={this.props.wdKey}
|
||||
error={props.error}
|
||||
data-wd-key={props.wdKey}
|
||||
>
|
||||
<InputAutocomplete
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
options={this.props.sourceIds?.map(src => [src, src])}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
options={props.sourceIds?.map((src) => [src, src])}
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
FieldSourceInternal.defaultProps = {
|
||||
onChange: () => {},
|
||||
sourceIds: [],
|
||||
};
|
||||
|
||||
const FieldSource = withTranslation()(FieldSourceInternal);
|
||||
export default FieldSource;
|
||||
|
||||
@@ -13,30 +13,29 @@ type FieldSourceLayerInternalProps = {
|
||||
error?: {message: string}
|
||||
} & WithTranslation;
|
||||
|
||||
class FieldSourceLayerInternal extends React.Component<FieldSourceLayerInternalProps> {
|
||||
static defaultProps = {
|
||||
onChange: () => {},
|
||||
sourceLayerIds: [],
|
||||
isFixed: false
|
||||
}
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <Block
|
||||
label={t("Source Layer")}
|
||||
const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
return (
|
||||
<Block
|
||||
label={t('Source Layer')}
|
||||
fieldSpec={latest.layer['source-layer']}
|
||||
data-wd-key="layer-source-layer"
|
||||
error={this.props.error}
|
||||
error={props.error}
|
||||
>
|
||||
<InputAutocomplete
|
||||
keepMenuWithinWindowBounds={!!this.props.isFixed}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
options={this.props.sourceLayerIds?.map(l => [l, l])}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
options={props.sourceLayerIds?.map((l) => [l, l])}
|
||||
/>
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
FieldSourceLayerInternal.defaultProps = {
|
||||
onChange: () => {},
|
||||
sourceLayerIds: [],
|
||||
isFixed: false,
|
||||
};
|
||||
|
||||
const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
|
||||
export default FieldSourceLayer;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import Block from './Block'
|
||||
import InputString, {InputStringProps} from './InputString'
|
||||
|
||||
@@ -10,10 +9,12 @@ type FieldStringProps = InputStringProps & {
|
||||
}
|
||||
};
|
||||
|
||||
export default class FieldString extends React.Component<FieldStringProps> {
|
||||
render() {
|
||||
return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
|
||||
<InputString {...this.props} />
|
||||
const FieldString: React.FC<FieldStringProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputString {...props} />
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldString;
|
||||
|
||||
@@ -14,24 +14,17 @@ type FieldTypeInternalProps = {
|
||||
disabled?: boolean
|
||||
} & WithTranslation;
|
||||
|
||||
class FieldTypeInternal extends React.Component<FieldTypeInternalProps> {
|
||||
static defaultProps = {
|
||||
disabled: false,
|
||||
}
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <Block label={t("Type")} fieldSpec={latest.layer.type}
|
||||
data-wd-key={this.props.wdKey}
|
||||
error={this.props.error}
|
||||
const FieldTypeInternal: React.FC<FieldTypeInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
return (
|
||||
<Block label={t('Type')} fieldSpec={latest.layer.type}
|
||||
data-wd-key={props.wdKey}
|
||||
error={props.error}
|
||||
>
|
||||
{this.props.disabled &&
|
||||
<InputString
|
||||
value={this.props.value}
|
||||
disabled={true}
|
||||
/>
|
||||
}
|
||||
{!this.props.disabled &&
|
||||
{props.disabled && (
|
||||
<InputString value={props.value} disabled={true} />
|
||||
)}
|
||||
{!props.disabled && (
|
||||
<InputSelect
|
||||
options={[
|
||||
['background', 'Background'],
|
||||
@@ -44,14 +37,18 @@ class FieldTypeInternal extends React.Component<FieldTypeInternalProps> {
|
||||
['hillshade', 'Hillshade'],
|
||||
['heatmap', 'Heatmap'],
|
||||
]}
|
||||
onChange={this.props.onChange}
|
||||
value={this.props.value}
|
||||
data-wd-key={this.props.wdKey + ".select"}
|
||||
onChange={props.onChange}
|
||||
value={props.value}
|
||||
data-wd-key={props.wdKey + '.select'}
|
||||
/>
|
||||
}
|
||||
)}
|
||||
</Block>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
FieldTypeInternal.defaultProps = {
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
const FieldType = withTranslation()(FieldTypeInternal);
|
||||
export default FieldType;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
|
||||
import Block from './Block'
|
||||
|
||||
@@ -11,12 +10,12 @@ type FieldUrlProps = InputUrlProps & {
|
||||
};
|
||||
|
||||
|
||||
export default class FieldUrl extends React.Component<FieldUrlProps> {
|
||||
render () {
|
||||
return (
|
||||
<Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
|
||||
<InputUrl {...this.props} />
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
const FieldUrl: React.FC<FieldUrlProps> = (props) => {
|
||||
return (
|
||||
<Block label={props.label} fieldSpec={props.fieldSpec}>
|
||||
<InputUrl {...props} />
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
export default FieldUrl;
|
||||
|
||||
+26
-43
@@ -9,57 +9,40 @@ type FieldsetProps = PropsWithChildren & {
|
||||
action?: ReactElement,
|
||||
};
|
||||
|
||||
type FieldsetState = {
|
||||
showDoc: boolean
|
||||
};
|
||||
|
||||
export default class Fieldset extends React.Component<FieldsetProps, FieldsetState> {
|
||||
_labelId: string;
|
||||
const Fieldset: React.FC<FieldsetProps> = (props) => {
|
||||
const [showDoc, setShowDoc] = React.useState(false);
|
||||
const labelId = React.useRef(generateUniqueId('fieldset_label_'));
|
||||
|
||||
constructor (props: FieldsetProps) {
|
||||
super(props);
|
||||
this._labelId = generateUniqueId(`fieldset_label_`);
|
||||
this.state = {
|
||||
showDoc: false,
|
||||
}
|
||||
}
|
||||
const onToggleDoc = (val: boolean) => {
|
||||
setShowDoc(val);
|
||||
};
|
||||
|
||||
onToggleDoc = (val: boolean) => {
|
||||
this.setState({
|
||||
showDoc: val
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
|
||||
{this.props.fieldSpec &&
|
||||
return (
|
||||
<div className="maputnik-input-block" role="group" aria-labelledby={labelId.current}>
|
||||
{props.fieldSpec && (
|
||||
<div className="maputnik-input-block-label">
|
||||
<FieldDocLabel
|
||||
label={this.props.label}
|
||||
onToggleDoc={this.onToggleDoc}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
label={props.label}
|
||||
onToggleDoc={onToggleDoc}
|
||||
fieldSpec={props.fieldSpec}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
{!this.props.fieldSpec &&
|
||||
)}
|
||||
{!props.fieldSpec && (
|
||||
<div className="maputnik-input-block-label">
|
||||
{this.props.label}
|
||||
{props.label}
|
||||
</div>
|
||||
}
|
||||
<div className="maputnik-input-block-action">
|
||||
{this.props.action}
|
||||
</div>
|
||||
<div className="maputnik-input-block-content">
|
||||
{this.props.children}
|
||||
</div>
|
||||
{this.props.fieldSpec &&
|
||||
<div
|
||||
className="maputnik-doc-inline"
|
||||
style={{display: this.state.showDoc ? '' : 'none'}}
|
||||
>
|
||||
<Doc fieldSpec={this.props.fieldSpec} />
|
||||
)}
|
||||
<div className="maputnik-input-block-action">{props.action}</div>
|
||||
<div className="maputnik-input-block-content">{props.children}</div>
|
||||
{props.fieldSpec && (
|
||||
<div className="maputnik-doc-inline" style={{ display: showDoc ? '' : 'none' }}>
|
||||
<Doc fieldSpec={props.fieldSpec} />
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Fieldset;
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import InputAutocomplete from './InputAutocomplete'
|
||||
import { mount } from 'cypress/react'
|
||||
|
||||
const fruits = ['apple', 'banana', 'cherry'];
|
||||
|
||||
describe('<InputAutocomplete />', () => {
|
||||
it('filters options when typing', () => {
|
||||
mount(
|
||||
<InputAutocomplete aria-label="Fruit" options={fruits.map(f => [f, f])} />
|
||||
);
|
||||
cy.get('input').focus();
|
||||
cy.get('.maputnik-autocomplete-menu-item').should('have.length', 3);
|
||||
cy.get('input').type('ch');
|
||||
cy.get('.maputnik-autocomplete-menu-item').should('have.length', 1).and('contain', 'cherry');
|
||||
cy.get('.maputnik-autocomplete-menu-item').click();
|
||||
cy.get('input').should('have.value', 'cherry');
|
||||
});
|
||||
});
|
||||
@@ -1,100 +1,116 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import Autocomplete from 'react-autocomplete'
|
||||
import {useCombobox} from 'downshift'
|
||||
|
||||
|
||||
const MAX_HEIGHT = 140;
|
||||
const MAX_HEIGHT = 140
|
||||
|
||||
export type InputAutocompleteProps = {
|
||||
value?: string
|
||||
options: any[]
|
||||
onChange(value: string | undefined): unknown
|
||||
keepMenuWithinWindowBounds?: boolean
|
||||
options?: any[]
|
||||
onChange?(value: string | undefined): unknown
|
||||
'aria-label'?: string
|
||||
};
|
||||
|
||||
export default class InputAutocomplete extends React.Component<InputAutocompleteProps> {
|
||||
state = {
|
||||
maxHeight: MAX_HEIGHT
|
||||
}
|
||||
export default function InputAutocomplete({
|
||||
value,
|
||||
options = [],
|
||||
onChange = () => {},
|
||||
'aria-label': ariaLabel,
|
||||
}: InputAutocompleteProps) {
|
||||
const [input, setInput] = React.useState(value || '')
|
||||
const menuRef = React.useRef<HTMLDivElement>(null)
|
||||
const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT)
|
||||
|
||||
autocompleteMenuEl: HTMLDivElement | null = null;
|
||||
const filteredItems = React.useMemo(() => {
|
||||
const lv = input.toLowerCase()
|
||||
return options.filter((item) => item[0].toLowerCase().includes(lv))
|
||||
}, [options, input])
|
||||
|
||||
static defaultProps = {
|
||||
onChange: () => {},
|
||||
options: [],
|
||||
}
|
||||
|
||||
calcMaxHeight() {
|
||||
if(this.props.keepMenuWithinWindowBounds) {
|
||||
const maxHeight = window.innerHeight - this.autocompleteMenuEl!.getBoundingClientRect().top;
|
||||
const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
|
||||
|
||||
if(limitedMaxHeight != this.state.maxHeight) {
|
||||
this.setState({
|
||||
maxHeight: limitedMaxHeight
|
||||
})
|
||||
}
|
||||
const calcMaxHeight = React.useCallback(() => {
|
||||
if (menuRef.current) {
|
||||
const space = window.innerHeight - menuRef.current.getBoundingClientRect().top
|
||||
setMaxHeight(Math.min(space, MAX_HEIGHT))
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
componentDidMount() {
|
||||
this.calcMaxHeight();
|
||||
}
|
||||
const {
|
||||
isOpen,
|
||||
getMenuProps,
|
||||
getInputProps,
|
||||
getItemProps,
|
||||
highlightedIndex,
|
||||
openMenu,
|
||||
} = useCombobox({
|
||||
items: filteredItems,
|
||||
inputValue: input,
|
||||
itemToString: (item) => (item ? item[0] : ''),
|
||||
stateReducer: (_state, action) => {
|
||||
if (action.type === useCombobox.stateChangeTypes.InputClick) {
|
||||
return {...action.changes, isOpen: true}
|
||||
}
|
||||
return action.changes
|
||||
},
|
||||
onSelectedItemChange: ({selectedItem}) => {
|
||||
const v = selectedItem ? selectedItem[0] : ''
|
||||
setInput(v)
|
||||
onChange(selectedItem ? selectedItem[0] : undefined)
|
||||
},
|
||||
onInputValueChange: ({inputValue: v}) => {
|
||||
if (typeof v === 'string') {
|
||||
setInput(v)
|
||||
onChange(v === '' ? undefined : v)
|
||||
openMenu()
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
componentDidUpdate() {
|
||||
this.calcMaxHeight();
|
||||
}
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
calcMaxHeight()
|
||||
}
|
||||
}, [isOpen, calcMaxHeight])
|
||||
|
||||
onChange(v: string) {
|
||||
this.props.onChange(v === "" ? undefined : v);
|
||||
}
|
||||
React.useEffect(() => {
|
||||
window.addEventListener('resize', calcMaxHeight)
|
||||
return () => window.removeEventListener('resize', calcMaxHeight)
|
||||
}, [calcMaxHeight])
|
||||
|
||||
render() {
|
||||
return <div
|
||||
ref={(el) => {
|
||||
this.autocompleteMenuEl = el;
|
||||
}}
|
||||
>
|
||||
<Autocomplete
|
||||
menuStyle={{
|
||||
position: "fixed",
|
||||
overflow: "auto",
|
||||
maxHeight: this.state.maxHeight,
|
||||
zIndex: '998'
|
||||
}}
|
||||
wrapperProps={{
|
||||
className: "maputnik-autocomplete",
|
||||
style: {}
|
||||
}}
|
||||
inputProps={{
|
||||
'aria-label': this.props['aria-label'],
|
||||
className: "maputnik-string",
|
||||
spellCheck: false
|
||||
}}
|
||||
value={this.props.value}
|
||||
items={this.props.options}
|
||||
getItemValue={(item) => item[0]}
|
||||
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
|
||||
}
|
||||
return false
|
||||
}}
|
||||
renderItem={(item, isHighlighted) => (
|
||||
<div
|
||||
key={item[0]}
|
||||
className={classnames({
|
||||
"maputnik-autocomplete-menu-item": true,
|
||||
"maputnik-autocomplete-menu-item-selected": isHighlighted,
|
||||
})}
|
||||
>
|
||||
{item[1]}
|
||||
</div>
|
||||
)}
|
||||
React.useEffect(() => {
|
||||
setInput(value || '')
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<div className="maputnik-autocomplete">
|
||||
<input
|
||||
{...getInputProps({
|
||||
'aria-label': ariaLabel,
|
||||
className: 'maputnik-string',
|
||||
spellCheck: false,
|
||||
onFocus: () => openMenu(),
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
{...getMenuProps({}, {suppressRefError: true})}
|
||||
ref={menuRef}
|
||||
style={{position: 'fixed', overflow: 'auto', maxHeight, zIndex: 998}}
|
||||
className="maputnik-autocomplete-menu"
|
||||
>
|
||||
{isOpen &&
|
||||
filteredItems.map((item, index) => (
|
||||
<div
|
||||
key={item[0]}
|
||||
{...getItemProps({
|
||||
item,
|
||||
index,
|
||||
className: classnames('maputnik-autocomplete-menu-item', {
|
||||
'maputnik-autocomplete-menu-item-selected': highlightedIndex === index,
|
||||
}),
|
||||
})}
|
||||
>
|
||||
{item[1]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, {type JSX} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
|
||||
import {Accordion} from 'react-accessible-accordion';
|
||||
import {MdMoreVert} from 'react-icons/md'
|
||||
import { IconContext } from 'react-icons'
|
||||
import {BackgroundLayerSpecification, LayerSpecification, SourceSpecification} from 'maplibre-gl';
|
||||
|
||||
import FieldJson from './FieldJson'
|
||||
@@ -86,10 +86,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
onLayerDestroyed: () => {},
|
||||
}
|
||||
|
||||
static childContextTypes = {
|
||||
reactIconBase: PropTypes.object
|
||||
}
|
||||
|
||||
constructor(props: LayerEditorInternalProps) {
|
||||
super(props)
|
||||
|
||||
@@ -116,14 +112,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
};
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
return {
|
||||
reactIconBase: {
|
||||
size: 14,
|
||||
color: '#8e8e8e',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
changeProperty(group: keyof LayerSpecification | null, property: string, newValue: any) {
|
||||
this.props.onLayerChanged(
|
||||
@@ -311,53 +299,55 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
items[id].handler();
|
||||
}
|
||||
|
||||
return <section className="maputnik-layer-editor"
|
||||
role="main"
|
||||
aria-label={t("Layer editor")}
|
||||
>
|
||||
<header>
|
||||
<div className="layer-header">
|
||||
<h2 className="layer-header__title">
|
||||
{t("Layer: {{layerId}}", { layerId: formatLayerId(this.props.layer.id) })}
|
||||
</h2>
|
||||
<div className="layer-header__info">
|
||||
<Wrapper
|
||||
className='more-menu'
|
||||
onSelection={handleSelection}
|
||||
closeOnSelection={false}
|
||||
>
|
||||
<Button
|
||||
id="skip-target-layer-editor"
|
||||
data-wd-key="skip-target-layer-editor"
|
||||
className='more-menu__button'
|
||||
title={"Layer options"}>
|
||||
<MdMoreVert className="more-menu__button__svg" />
|
||||
</Button>
|
||||
<Menu>
|
||||
<ul className="more-menu__menu">
|
||||
{Object.keys(items).map((id) => {
|
||||
const item = items[id];
|
||||
return <li key={id}>
|
||||
<MenuItem value={id} className='more-menu__menu__item'>
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</Menu>
|
||||
</Wrapper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<Accordion
|
||||
allowMultipleExpanded={true}
|
||||
allowZeroExpanded={true}
|
||||
preExpanded={groupIds}
|
||||
return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
|
||||
<section className="maputnik-layer-editor"
|
||||
role="main"
|
||||
aria-label={t("Layer editor")}
|
||||
>
|
||||
{groups}
|
||||
</Accordion>
|
||||
</section>
|
||||
<header>
|
||||
<div className="layer-header">
|
||||
<h2 className="layer-header__title">
|
||||
{t("Layer: {{layerId}}", { layerId: formatLayerId(this.props.layer.id) })}
|
||||
</h2>
|
||||
<div className="layer-header__info">
|
||||
<Wrapper
|
||||
className='more-menu'
|
||||
onSelection={handleSelection}
|
||||
closeOnSelection={false}
|
||||
>
|
||||
<Button
|
||||
id="skip-target-layer-editor"
|
||||
data-wd-key="skip-target-layer-editor"
|
||||
className='more-menu__button'
|
||||
title={"Layer options"}>
|
||||
<MdMoreVert className="more-menu__button__svg" />
|
||||
</Button>
|
||||
<Menu>
|
||||
<ul className="more-menu__menu">
|
||||
{Object.keys(items).map((id) => {
|
||||
const item = items[id];
|
||||
return <li key={id}>
|
||||
<MenuItem value={id} className='more-menu__menu__item'>
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</Menu>
|
||||
</Wrapper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<Accordion
|
||||
allowMultipleExpanded={true}
|
||||
allowZeroExpanded={true}
|
||||
preExpanded={groupIds}
|
||||
>
|
||||
{groups}
|
||||
</Accordion>
|
||||
</section>
|
||||
</IconContext.Provider>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
|
||||
import { IconContext } from 'react-icons'
|
||||
|
||||
import IconLayer from './IconLayer'
|
||||
import {SortableElement, SortableHandle} from 'react-sortable-hoc'
|
||||
@@ -91,51 +91,43 @@ class LayerListItem extends React.Component<LayerListItemProps> {
|
||||
onLayerVisibilityToggle: () => {},
|
||||
}
|
||||
|
||||
static childContextTypes = {
|
||||
reactIconBase: PropTypes.object
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
reactIconBase: { size: 14 }
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
|
||||
|
||||
return <li
|
||||
id={this.props.id}
|
||||
key={this.props.layerId}
|
||||
onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
|
||||
data-wd-key={"layer-list-item:"+this.props.layerId}
|
||||
className={classnames({
|
||||
"maputnik-layer-list-item": true,
|
||||
"maputnik-layer-list-item-selected": this.props.isSelected,
|
||||
[this.props.className!]: true,
|
||||
})}>
|
||||
<DraggableLabel {...this.props} />
|
||||
<span style={{flexGrow: 1}} />
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
|
||||
action={'delete'}
|
||||
classBlockName="delete"
|
||||
onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
|
||||
/>
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":copy"}
|
||||
action={'duplicate'}
|
||||
classBlockName="duplicate"
|
||||
onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
|
||||
/>
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
|
||||
action={visibilityAction}
|
||||
classBlockName="visibility"
|
||||
classBlockModifier={visibilityAction}
|
||||
onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
|
||||
/>
|
||||
</li>
|
||||
return <IconContext.Provider value={{size: '14px'}}>
|
||||
<li
|
||||
id={this.props.id}
|
||||
key={this.props.layerId}
|
||||
onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
|
||||
data-wd-key={"layer-list-item:"+this.props.layerId}
|
||||
className={classnames({
|
||||
"maputnik-layer-list-item": true,
|
||||
"maputnik-layer-list-item-selected": this.props.isSelected,
|
||||
[this.props.className!]: true,
|
||||
})}>
|
||||
<DraggableLabel {...this.props} />
|
||||
<span style={{flexGrow: 1}} />
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
|
||||
action={'delete'}
|
||||
classBlockName="delete"
|
||||
onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
|
||||
/>
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":copy"}
|
||||
action={'duplicate'}
|
||||
classBlockName="duplicate"
|
||||
onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
|
||||
/>
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
|
||||
action={visibilityAction}
|
||||
classBlockName="visibility"
|
||||
classBlockModifier={visibilityAction}
|
||||
onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
|
||||
/>
|
||||
</li>
|
||||
</IconContext.Provider>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,10 +23,16 @@ type ModalAddState = {
|
||||
id: string
|
||||
source?: string
|
||||
'source-layer'?: string
|
||||
error?: string | null
|
||||
};
|
||||
|
||||
class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddState> {
|
||||
addLayer = () => {
|
||||
if (this.props.layers.some(l => l.id === this.state.id)) {
|
||||
this.setState({ error: this.props.t('Layer ID already exists') })
|
||||
return
|
||||
}
|
||||
|
||||
const changedLayers = this.props.layers.slice(0)
|
||||
const layer: ModalAddState = {
|
||||
id: this.state.id,
|
||||
@@ -41,9 +47,10 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
}
|
||||
|
||||
changedLayers.push(layer as LayerSpecification)
|
||||
|
||||
this.props.onLayersChange(changedLayers)
|
||||
this.props.onOpenToggle(false)
|
||||
this.setState({ error: null }, () => {
|
||||
this.props.onLayersChange(changedLayers)
|
||||
this.props.onOpenToggle(false)
|
||||
})
|
||||
}
|
||||
|
||||
constructor(props: ModalAddInternalProps) {
|
||||
@@ -51,6 +58,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
const state: ModalAddState = {
|
||||
type: 'fill',
|
||||
id: '',
|
||||
error: null,
|
||||
}
|
||||
|
||||
if(props.sources.length > 0) {
|
||||
@@ -129,6 +137,21 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
const t = this.props.t;
|
||||
const sources = this.getSources(this.state.type);
|
||||
const layers = this.getLayersForSource(this.state.source!);
|
||||
let errorElement;
|
||||
if (this.state.error) {
|
||||
errorElement = (
|
||||
<div className="maputnik-modal-error">
|
||||
{this.state.error}
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => this.setState({ error: null })}
|
||||
className="maputnik-modal-error-close"
|
||||
>
|
||||
×
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <Modal
|
||||
isOpen={this.props.isOpen}
|
||||
@@ -137,12 +160,13 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
data-wd-key="modal:add-layer"
|
||||
className="maputnik-add-modal"
|
||||
>
|
||||
{errorElement}
|
||||
<div className="maputnik-add-layer">
|
||||
<FieldId
|
||||
value={this.state.id}
|
||||
wdKey="add-layer.layer-id"
|
||||
onChange={(v: string) => {
|
||||
this.setState({ id: v })
|
||||
this.setState({ id: v, error: null })
|
||||
}}
|
||||
/>
|
||||
<FieldType
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import Block from './Block'
|
||||
import InputSpec, { SpecFieldProps as InputFieldSpecProps } from './InputSpec'
|
||||
import Fieldset from './Fieldset'
|
||||
@@ -20,27 +19,25 @@ export type SpecFieldProps = InputFieldSpecProps & {
|
||||
name?: string
|
||||
};
|
||||
|
||||
export default class SpecField extends React.Component<SpecFieldProps> {
|
||||
render() {
|
||||
const fieldType = this.props.fieldSpec?.type;
|
||||
const SpecField: React.FC<SpecFieldProps> = (props) => {
|
||||
const fieldType = props.fieldSpec?.type;
|
||||
|
||||
const typeBlockFn = typeMap[fieldType!];
|
||||
const typeBlockFn = typeMap[fieldType!];
|
||||
|
||||
let TypeBlock;
|
||||
if (typeBlockFn) {
|
||||
TypeBlock = typeBlockFn(this.props);
|
||||
}
|
||||
else {
|
||||
console.warn("No such type for '%s'", fieldType);
|
||||
TypeBlock = Block;
|
||||
}
|
||||
|
||||
return <TypeBlock
|
||||
label={this.props.label}
|
||||
action={this.props.action}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
>
|
||||
<InputSpec {...this.props} />
|
||||
</TypeBlock>
|
||||
let TypeBlock;
|
||||
if (typeBlockFn) {
|
||||
TypeBlock = typeBlockFn(props);
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.warn("No such type for '%s'", fieldType);
|
||||
TypeBlock = Block;
|
||||
}
|
||||
|
||||
return (
|
||||
<TypeBlock label={props.label} action={props.action} fieldSpec={props.fieldSpec}>
|
||||
<InputSpec {...props} />
|
||||
</TypeBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpecField;
|
||||
|
||||
+12
-24
@@ -11,6 +11,18 @@
|
||||
"url": "https://americanamap.org/style.json",
|
||||
"thumbnail": "https://github.com/maplibre/maputnik/assets/649392/23fa75ad-63e6-43f5-8837-03cdb0428bac"
|
||||
},
|
||||
{
|
||||
"id": "aws-hybrid",
|
||||
"title": "AWS Hybrid",
|
||||
"url": "https://maps.geo.eu-west-1.amazonaws.com/v2/styles/Hybrid/descriptor?key=v1.public.eyJqdGkiOiJiOTNkYjBlZi04OWUzLTQxMGUtODFhMC0zYjZjZjVmZWZmMDgifYtukap0NBaJpcrS6Vit9j03GJgK9Bn-RSu5UCe3jkdSql2kKp3IEgLPtyLssbmKUdVO11sXddjK3ZOZy8V6QG0olv0K_1tOxyMIe4DAO3IV6H4VzHWiaXlbSakGiEgFLuHBdcfLDeMotye7N6rSRxuZb0CN9ytH9VjLly6-NEBRZezO_qPQyvdTFdeZsARIpL0f9YVpxPxPVvUcAWYCk5LpaPseRCDPrY5SlCdA1ZKqUA4F9RzxSTxB73Fel_SoNDkCNaux1VposBu791-uUpDzUpr7leKckrPXrpZ2hwnFbafVxFV9vq4fLTpB5KoBksuLfGNIwAx1RLLxWuMhE4c.ZGQzZDY2OGQtMWQxMy00ZTEwLWIyZGUtOGVjYzUzMjU3OGE4&color-scheme=Light",
|
||||
"thumbnail": "https://maputnik.s3.eu-west-1.amazonaws.com/thumbnails/aws-hybrid.jpg"
|
||||
},
|
||||
{
|
||||
"id": "aws-standard",
|
||||
"title": "AWS Standard",
|
||||
"url": "https://maps.geo.eu-west-1.amazonaws.com/v2/styles/Standard/descriptor?key=v1.public.eyJqdGkiOiJiOTNkYjBlZi04OWUzLTQxMGUtODFhMC0zYjZjZjVmZWZmMDgifYtukap0NBaJpcrS6Vit9j03GJgK9Bn-RSu5UCe3jkdSql2kKp3IEgLPtyLssbmKUdVO11sXddjK3ZOZy8V6QG0olv0K_1tOxyMIe4DAO3IV6H4VzHWiaXlbSakGiEgFLuHBdcfLDeMotye7N6rSRxuZb0CN9ytH9VjLly6-NEBRZezO_qPQyvdTFdeZsARIpL0f9YVpxPxPVvUcAWYCk5LpaPseRCDPrY5SlCdA1ZKqUA4F9RzxSTxB73Fel_SoNDkCNaux1VposBu791-uUpDzUpr7leKckrPXrpZ2hwnFbafVxFV9vq4fLTpB5KoBksuLfGNIwAx1RLLxWuMhE4c.ZGQzZDY2OGQtMWQxMy00ZTEwLWIyZGUtOGVjYzUzMjU3OGE4&color-scheme=Light",
|
||||
"thumbnail": "https://maputnik.s3.eu-west-1.amazonaws.com/thumbnails/aws-standard.jpg"
|
||||
},
|
||||
{
|
||||
"id": "dark-matter",
|
||||
"title": "Dark Matter",
|
||||
@@ -29,30 +41,6 @@
|
||||
"url": "https://cdn.jsdelivr.net/gh/openmaptiles/toner-gl-style@v1.0/style.json",
|
||||
"thumbnail": "https://maputnik.github.io/thumbnails/toner.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": "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": "osm-bright",
|
||||
"title": "OSM Bright",
|
||||
|
||||
+22
-2
@@ -91,8 +91,28 @@ export class StyleStore {
|
||||
save(mapStyle: StyleSpecification & { id: string }) {
|
||||
mapStyle = style.ensureStyleValidity(mapStyle)
|
||||
const key = styleKey(mapStyle.id)
|
||||
window.localStorage.setItem(key, JSON.stringify(mapStyle))
|
||||
window.localStorage.setItem(storageKeys.latest, mapStyle.id)
|
||||
|
||||
const saveFn = () => {
|
||||
window.localStorage.setItem(key, JSON.stringify(mapStyle))
|
||||
window.localStorage.setItem(storageKeys.latest, mapStyle.id)
|
||||
}
|
||||
|
||||
try {
|
||||
saveFn()
|
||||
} catch (e) {
|
||||
// Handle quota exceeded error
|
||||
if (e instanceof DOMException && (
|
||||
e.code === 22 || // Firefox
|
||||
e.code === 1014 || // Firefox
|
||||
e.name === 'QuotaExceededError' ||
|
||||
e.name === 'NS_ERROR_DOM_QUOTA_REACHED'
|
||||
)) {
|
||||
this.purge()
|
||||
saveFn() // Retry after clearing
|
||||
} else {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
return mapStyle
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
"Collapse": "Einklappen",
|
||||
"Expand": "Ausklappen",
|
||||
"Add Layer": "Ebene hinzufügen",
|
||||
"Layer ID already exists": "Layer-ID existiert bereits",
|
||||
"Search": "Suche",
|
||||
"Zoom:": "Zoom:",
|
||||
"Close popup": "Popup schließen",
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
"Collapse": "Réduire",
|
||||
"Expand": "Développer",
|
||||
"Add Layer": "Ajouter un calque",
|
||||
"Layer ID already exists": "L'identifiant du calque existe déjà",
|
||||
"Search": "Recherche",
|
||||
"Zoom:": "Zoom :",
|
||||
"Close popup": "Fermer la fenêtre",
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
"Collapse": "הקטנה",
|
||||
"Expand": "הגדלה",
|
||||
"Add Layer": "הוספת שכבה",
|
||||
"Layer ID already exists": "מזהה השכבה כבר קיים",
|
||||
"Search": "חיפוש",
|
||||
"Zoom:": "זום:",
|
||||
"Close popup": "סגירת החלון",
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
"Collapse": "Coprimi",
|
||||
"Expand": "Espandi",
|
||||
"Add Layer": "Aggiungi Livello",
|
||||
"Layer ID already exists": "L'ID del layer esiste già",
|
||||
"Search": "Cerca",
|
||||
"Zoom:": "Zoom:",
|
||||
"Close popup": "Chiudi popup",
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
"Collapse": "畳む",
|
||||
"Expand": "展開",
|
||||
"Add Layer": "レイヤー追加",
|
||||
"Layer ID already exists": "レイヤーIDは既に存在します",
|
||||
"Search": "検索",
|
||||
"Zoom:": "ズーム:",
|
||||
"Close popup": "ポップアップを閉じる",
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
"Collapse": "折叠",
|
||||
"Expand": "展开",
|
||||
"Add Layer": "添加图层",
|
||||
"Layer ID already exists": "图层ID已存在",
|
||||
"Search": "搜索",
|
||||
"Zoom:": "缩放:",
|
||||
"Close popup": "关闭弹出窗口",
|
||||
@@ -149,7 +150,7 @@
|
||||
"Raster (Tile URLs)": "栅格数据 (Tile URLs)",
|
||||
"Raster DEM (TileJSON URL)": "栅格高程数据 (TileJSON URL)",
|
||||
"Raster DEM (XYZ URLs)": "栅格高程数据 (XYZ URLs)",
|
||||
"Vector (PMTiles)": "__STRING_NOT_TRANSLATED__",
|
||||
"Vector (PMTiles)": "矢量数据 (PMTiles)",
|
||||
"Image": "图像",
|
||||
"Video": "视频",
|
||||
"Add Source": "添加源",
|
||||
@@ -161,7 +162,7 @@
|
||||
"Add a new source to your style. You can only choose the source type and id at creation time!": "向您的样式添加新源。在创建时，您只能选择源类型和ID！",
|
||||
"TileJSON URL": "TileJSON URL",
|
||||
"Tile URL": "瓦片URL",
|
||||
"Scheme Type": "__STRING_NOT_TRANSLATED__",
|
||||
"Scheme Type": "瓦片方案",
|
||||
"Coord top left": "左上角坐标",
|
||||
"Coord top right": "右上角坐标",
|
||||
"Coord bottom right": "右下角坐标",
|
||||
@@ -171,13 +172,13 @@
|
||||
"GeoJSON URL": "GeoJSON URL",
|
||||
"GeoJSON": "GeoJSON",
|
||||
"Cluster": "聚合",
|
||||
"PMTiles URL": "__STRING_NOT_TRANSLATED__",
|
||||
"Tile Size": "__STRING_NOT_TRANSLATED__",
|
||||
"PMTiles URL": "PMTiles URL",
|
||||
"Tile Size": "瓦片大小",
|
||||
"Encoding": "编码",
|
||||
"Error:": "错误：",
|
||||
"MapTiler Access Token": "MapTiler 访问令牌",
|
||||
"Public access token for MapTiler Cloud.": "MapTiler Cloud 的公共访问令牌。",
|
||||
"Learn More": "__STRING_NOT_TRANSLATED__",
|
||||
"Learn More": "了解更多",
|
||||
"Thunderforest Access Token": "Thunderforest 访问令牌",
|
||||
"Public access token for Thunderforest services.": "Thunderforest 服务的公共访问令牌。",
|
||||
"Stadia Maps API Key": "Stadia Maps API 密钥",
|
||||
|
||||
Reference in New Issue
Block a user