mirror of
https://github.com/maputnik/editor.git
synced 2025-12-06 06:10:00 +00:00
chore(deps-dev): Bump typescript from 5.8.3 to 5.9.2 (#1301)
Bumps [typescript](https://github.com/microsoft/TypeScript) from 5.8.3 to 5.9.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/microsoft/TypeScript/releases">typescript's releases</a>.</em></p> <blockquote> <h2>TypeScript 5.9</h2> <p>Release notes pending.</p> <!-- raw HTML omitted --> <ul> <li><a href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+">fixed issues query for Typescript 5.9.0 (Beta)</a>.</li> <li><a href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&q=milestone%3A%22TypeScript+5.9.1%22+is%3Aclosed+">fixed issues query for Typescript 5.9.1 (RC)</a>.</li> <li>[[No specific changes for TypeScript 5.9.2 (Stable)]]</li> </ul> <p>Downloads are available on:</p> <ul> <li><a href="https://www.npmjs.com/package/typescript">npm</a></li> </ul> <h2>TypeScript 5.9 RC</h2> <p>For release notes, check out the <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-9-rc/">release announcement</a></p> <ul> <li><a href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+">fixed issues query for Typescript 5.9.0 (Beta)</a>.</li> <li><a href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&q=milestone%3A%22TypeScript+5.9.1%22+is%3Aclosed+">fixed issues query for Typescript 5.9.1 (RC)</a>.</li> </ul> <p>Downloads are available on:</p> <ul> <li><a href="https://www.npmjs.com/package/typescript">npm</a></li> </ul> <h2>TypeScript 5.9 Beta</h2> <p>For release notes, check out the <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-9-beta/">release announcement</a>.</p> <ul> <li><a href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+">fixed issues query for Typescript 5.9.0 (Beta)</a>.</li> </ul> <p>Downloads are available on:</p> <ul> <li><a href="https://www.npmjs.com/package/typescript">npm</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="be86783155"><code>be86783</code></a> Give more specific errors for <code>verbatimModuleSyntax</code> (<a href="https://redirect.github.com/microsoft/TypeScript/issues/62113">#62113</a>)</li> <li><a href="22ef57786f"><code>22ef577</code></a> LEGO: Pull request from lego/hb_5378966c-b857-470a-8675-daebef4a6da1_20250714...</li> <li><a href="d5a414cd1d"><code>d5a414c</code></a> Don't use <code>noErrorTruncation</code> when printing types with <code>maximumLength</code> set (#...</li> <li><a href="f14b5c8a2f"><code>f14b5c8</code></a> Remove unused and confusing dom.iterable.d.ts file (<a href="https://redirect.github.com/microsoft/TypeScript/issues/62037">#62037</a>)</li> <li><a href="2778e84ed8"><code>2778e84</code></a> Restore AbortSignal.abort (<a href="https://redirect.github.com/microsoft/TypeScript/issues/62086">#62086</a>)</li> <li><a href="65cb4bd2d5"><code>65cb4bd</code></a> LEGO: Pull request from lego/hb_5378966c-b857-470a-8675-daebef4a6da1_20250710...</li> <li><a href="9e20e032ef"><code>9e20e03</code></a> Clear out checker-level stacks on pop (<a href="https://redirect.github.com/microsoft/TypeScript/issues/62016">#62016</a>)</li> <li><a href="87740bc7fe"><code>87740bc</code></a> Fix for Issue 61081 (<a href="https://redirect.github.com/microsoft/TypeScript/issues/61221">#61221</a>)</li> <li><a href="833a8d492c"><code>833a8d4</code></a> Fix Symbol completion priority and cursor positioning (<a href="https://redirect.github.com/microsoft/TypeScript/issues/61945">#61945</a>)</li> <li><a href="0018c9ff12"><code>0018c9f</code></a> LEGO: Pull request from lego/hb_5378966c-b857-470a-8675-daebef4a6da1_20250702...</li> <li>Additional commits viewable in <a href="https://github.com/microsoft/TypeScript/compare/v5.8.3...v5.9.2">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) You can trigger a rebase of this PR by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> > **Note** > Automatic rebases have been disabled on this pull request as it has been open for over 30 days. --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Harel M <harel.mazor@gmail.com>
This commit is contained in:
dependabot[bot]
GitHub
@@ -10,12 +10,12 @@
|
||||
* https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
|
||||
*/
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as fs from "fs";
|
||||
|
||||
const changelogPath = 'CHANGELOG.md';
|
||||
let changelog = fs.readFileSync(changelogPath, 'utf8');
|
||||
changelog = changelog.replace('## main', `## ${process.argv[2]}`);
|
||||
changelog = changelog.replaceAll('- _...Add new stuff here..._\n', '');
|
||||
const changelogPath = "CHANGELOG.md";
|
||||
let changelog = fs.readFileSync(changelogPath, "utf8");
|
||||
changelog = changelog.replace("## main", `## ${process.argv[2]}`);
|
||||
changelog = changelog.replaceAll("- _...Add new stuff here..._\n", "");
|
||||
changelog = `## main
|
||||
|
||||
### ✨ Features and improvements
|
||||
@@ -26,4 +26,4 @@ changelog = `## main
|
||||
|
||||
` + changelog;
|
||||
|
||||
fs.writeFileSync(changelogPath, changelog, 'utf8');
|
||||
fs.writeFileSync(changelogPath, changelog, "utf8");
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
// Copied from maplibre/maplibre-gl-js
|
||||
// https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as fs from "fs";
|
||||
|
||||
const changelogPath = 'CHANGELOG.md';
|
||||
const changelog = fs.readFileSync(changelogPath, 'utf8');
|
||||
const changelogPath = "CHANGELOG.md";
|
||||
const changelog = fs.readFileSync(changelogPath, "utf8");
|
||||
|
||||
/*
|
||||
Parse the raw changelog text and split it into individual releases.
|
||||
@@ -25,8 +25,8 @@ let match;
|
||||
// eslint-disable-next-line no-cond-assign
|
||||
while (match = regex.exec(changelog)) {
|
||||
releaseNotes.push({
|
||||
'version': match[1],
|
||||
'changelog': match[2].trim(),
|
||||
"version": match[1],
|
||||
"changelog": match[2].trim(),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -35,10 +35,10 @@ const previous = releaseNotes[1];
|
||||
|
||||
// Print the release notes template.
|
||||
|
||||
let header = 'Changes since previous version'
|
||||
let header = "Changes since previous version";
|
||||
if (previous) {
|
||||
header = `https://github.com/maplibre/maputnik
|
||||
[Changes](https://github.com/maplibre/maputnik/compare/v${previous.version}...v${latest.version}) since [Maputnik v${previous.version}](https://github.com/maplibre/maputnik/releases/tag/v${previous.version})`
|
||||
[Changes](https://github.com/maplibre/maputnik/compare/v${previous.version}...v${latest.version}) since [Maputnik v${previous.version}](https://github.com/maplibre/maputnik/releases/tag/v${previous.version})`;
|
||||
}
|
||||
const templatedReleaseNotes = `${header}
|
||||
|
||||
|
||||
@@ -313,7 +313,7 @@ describe("layers", () => {
|
||||
|
||||
it("should revert to a valid value when focus out", () => {
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue('0');
|
||||
then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -575,10 +575,10 @@ describe("layers", () => {
|
||||
});
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.collapseGroupInLayerEditor(1);
|
||||
when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", '1');
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", '2');
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", '3');
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", '4');
|
||||
when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", "1");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "2");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "3");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "4");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
@@ -600,9 +600,9 @@ describe("layers", () => {
|
||||
layer: "example",
|
||||
});
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.setValueToPropertyArray("spec-field:hillshade-highlight-color", 'blue');
|
||||
when.addValueToPropertyArray("spec-field:hillshade-highlight-color", '#00ff00');
|
||||
when.addValueToPropertyArray("spec-field:hillshade-highlight-color", 'rgba(255, 255, 0, 1)');
|
||||
when.setValueToPropertyArray("spec-field:hillshade-highlight-color", "blue");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "#00ff00");
|
||||
when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "rgba(255, 255, 0, 1)");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
@@ -706,8 +706,8 @@ describe("layers", () => {
|
||||
sourceText.click();
|
||||
sourceText.type("\"");
|
||||
|
||||
const error = get.element('.CodeMirror-lint-marker-error');
|
||||
error.should('exist');
|
||||
const error = get.element(".CodeMirror-lint-marker-error");
|
||||
error.should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ describe("map", () => {
|
||||
});
|
||||
|
||||
describe("search", () => {
|
||||
it('should exist', () => {
|
||||
it("should exist", () => {
|
||||
then(get.searchControl()).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -33,7 +33,7 @@ describe("map", () => {
|
||||
describe("popup", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("rectangles");
|
||||
})
|
||||
});
|
||||
it("should open on feature click", () => {
|
||||
when.clickCenter("maplibre:map");
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/// <reference types="cypress-real-events" />
|
||||
import { CypressHelper } from "@shellygo/cypress-test-utils";
|
||||
import 'cypress-real-events/support';
|
||||
import "cypress-real-events/support";
|
||||
|
||||
export default class MaputnikCypressHelper {
|
||||
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
|
||||
@@ -17,7 +17,7 @@ export default class MaputnikCypressHelper {
|
||||
dragAndDropWithWait: (element: string, targetElement: string) => {
|
||||
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
|
||||
this.helper.get.elementByTestId(element).realMouseMove(0, 10, { position: "center" });
|
||||
this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" })
|
||||
this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" });
|
||||
this.helper.when.wait(1);
|
||||
this.helper.get.elementByTestId(targetElement).realMouseUp();
|
||||
},
|
||||
|
||||
@@ -144,7 +144,7 @@ export class MaputnikDriver {
|
||||
this.helper.when.acceptConfirm();
|
||||
}
|
||||
// when methods should not include assertions
|
||||
const toolbarLink = this.helper.get.elementByTestId("toolbar:link")
|
||||
const toolbarLink = this.helper.get.elementByTestId("toolbar:link");
|
||||
toolbarLink.scrollIntoView();
|
||||
toolbarLink.should("be.visible");
|
||||
},
|
||||
@@ -215,6 +215,6 @@ export class MaputnikDriver {
|
||||
skipTargetLayerEditor: () =>
|
||||
this.helper.get.elementByTestId("skip-target-layer-editor"),
|
||||
canvas: () => this.helper.get.element("canvas"),
|
||||
searchControl: () => this.helper.get.element('.maplibregl-ctrl-geocoder')
|
||||
searchControl: () => this.helper.get.element(".maplibregl-ctrl-geocoder")
|
||||
};
|
||||
}
|
||||
|
||||
@@ -253,10 +253,10 @@ describe("modals", () => {
|
||||
|
||||
it("inlcude API key when change renderer", () => {
|
||||
|
||||
when.click("modal:settings.close-modal")
|
||||
when.click("modal:settings.close-modal");
|
||||
when.click("nav:open");
|
||||
|
||||
get.elementByAttribute('aria-label', "MapTiler Basic").should('exist').click();
|
||||
get.elementByAttribute("aria-label", "MapTiler Basic").should("exist").click();
|
||||
when.wait(1000);
|
||||
when.click("nav:settings");
|
||||
|
||||
@@ -322,7 +322,7 @@ describe("modals", () => {
|
||||
win.localStorage.setItem(key, chunk);
|
||||
} catch (e: any) {
|
||||
// Verify it's a quota error
|
||||
if (e.name === 'QuotaExceededError') {
|
||||
if (e.name === "QuotaExceededError") {
|
||||
if (chunkSize <= 1) return;
|
||||
else {
|
||||
chunkSize /= 2;
|
||||
|
||||
@@ -14,9 +14,9 @@
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
import "./commands";
|
||||
|
||||
import { mount } from 'cypress/react'
|
||||
import { mount } from "cypress/react";
|
||||
|
||||
// Augment the Cypress namespace to include type definitions for
|
||||
// your custom command.
|
||||
@@ -31,7 +31,7 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
Cypress.Commands.add('mount', mount)
|
||||
Cypress.Commands.add("mount", mount);
|
||||
|
||||
// Example use:
|
||||
// cy.mount(<MyComponent />)
|
||||
|
||||
@@ -1,56 +1,65 @@
|
||||
import eslint from '@eslint/js';
|
||||
import tseslint from 'typescript-eslint';
|
||||
import reactPlugin from 'eslint-plugin-react';
|
||||
import reactHooksPlugin from 'eslint-plugin-react-hooks';
|
||||
import reactRefreshPlugin from 'eslint-plugin-react-refresh';
|
||||
import eslint from "@eslint/js";
|
||||
import {defineConfig} from "eslint/config";
|
||||
import stylisticTs from "@stylistic/eslint-plugin";
|
||||
import tseslint from "typescript-eslint";
|
||||
import reactPlugin from "eslint-plugin-react";
|
||||
import reactHooksPlugin from "eslint-plugin-react-hooks";
|
||||
import reactRefreshPlugin from "eslint-plugin-react-refresh";
|
||||
|
||||
export default tseslint.config({
|
||||
export default defineConfig({
|
||||
extends: [
|
||||
eslint.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
],
|
||||
files: ['**/*.{js,jsx,ts,tsx}'],
|
||||
files: ["**/*.{js,jsx,ts,tsx}"],
|
||||
ignores: [
|
||||
"dist/**/*",
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2024,
|
||||
sourceType: 'module',
|
||||
sourceType: "module",
|
||||
globals: {
|
||||
global: 'readonly'
|
||||
global: "readonly"
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
react: { version: '18.2' }
|
||||
react: { version: "18.2" }
|
||||
},
|
||||
plugins: {
|
||||
'react': reactPlugin,
|
||||
'react-hooks': reactHooksPlugin,
|
||||
'react-refresh': reactRefreshPlugin
|
||||
"react": reactPlugin,
|
||||
"react-hooks": reactHooksPlugin,
|
||||
"react-refresh": reactRefreshPlugin,
|
||||
"@stylistic": stylisticTs
|
||||
},
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
{ allowConstantExport: true }
|
||||
],
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"warn",
|
||||
{
|
||||
varsIgnorePattern: '^_',
|
||||
caughtErrors: 'all',
|
||||
caughtErrorsIgnorePattern: '^_',
|
||||
argsIgnorePattern: '^_'
|
||||
varsIgnorePattern: "^_",
|
||||
caughtErrors: "all",
|
||||
caughtErrorsIgnorePattern: "^_",
|
||||
argsIgnorePattern: "^_"
|
||||
}
|
||||
],
|
||||
'no-unused-vars': 'off',
|
||||
'react/prop-types': 'off',
|
||||
'no-undef': 'off',
|
||||
'indent': ['error', 2],
|
||||
'no-var': 'error',
|
||||
'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
|
||||
'@typescript-eslint/ban-ts-comment': 'off',
|
||||
'@typescript-eslint/no-empty-object-type': 'off',
|
||||
"no-unused-vars": "off",
|
||||
"react/prop-types": "off",
|
||||
"no-undef": "off",
|
||||
"indent": "off",
|
||||
"@stylistic/indent": ["error", 2],
|
||||
"semi": "off",
|
||||
"@stylistic/semi": ["error", "always"],
|
||||
"quotes": "off",
|
||||
"@stylistic/quotes": ["error", "double", { avoidEscape: true }],
|
||||
"no-var": "error",
|
||||
"@typescript-eslint/no-non-null-asserted-optional-chain": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"@typescript-eslint/no-empty-object-type": "off",
|
||||
"@typescript-eslint/consistent-type-imports": ["error", { "fixStyle": "inline-type-imports" }],
|
||||
|
||||
},
|
||||
linterOptions: {
|
||||
@@ -58,4 +67,4 @@ export default tseslint.config({
|
||||
noInlineConfig: false
|
||||
}
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export default {
|
||||
output: 'src/locales/$LOCALE/$NAMESPACE.json',
|
||||
locales: [ 'de', 'fr', 'he', 'it','ja', 'zh' ],
|
||||
output: "src/locales/$LOCALE/$NAMESPACE.json",
|
||||
locales: [ "de", "fr", "he", "it","ja", "zh" ],
|
||||
|
||||
// Because some keys are dynamically generated, i18next-parser can't detect them.
|
||||
// We add these keys manually, so we don't want to remove them.
|
||||
@@ -12,6 +12,6 @@ export default {
|
||||
|
||||
defaultValue: (_locale, _ns, _key) => {
|
||||
// The default value is a string that indicates that the string is not translated.
|
||||
return '__STRING_NOT_TRANSLATED__';
|
||||
return "__STRING_NOT_TRANSLATED__";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
56
package-lock.json
generated
56
package-lock.json
generated
@@ -67,6 +67,7 @@
|
||||
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"@shellygo/cypress-test-utils": "^6.0.1",
|
||||
"@stylistic/eslint-plugin": "^5.3.1",
|
||||
"@types/codemirror": "^5.60.16",
|
||||
"@types/color": "^4.2.0",
|
||||
"@types/cors": "^2.8.19",
|
||||
@@ -107,7 +108,7 @@
|
||||
"stylelint": "^16.24.0",
|
||||
"stylelint-config-recommended-scss": "^16.0.1",
|
||||
"stylelint-scss": "^6.12.1",
|
||||
"typescript": "^5.8.3",
|
||||
"typescript": "^5.9.2",
|
||||
"typescript-eslint": "^8.43.0",
|
||||
"uuid": "^13.0.0",
|
||||
"vite": "^7.1.5",
|
||||
@@ -2805,6 +2806,53 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@stylistic/eslint-plugin": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.3.1.tgz",
|
||||
"integrity": "sha512-Ykums1VYonM0TgkD0VteVq9mrlO2FhF48MDJnPyv3MktIB2ydtuhlO0AfWm7xnW1kyf5bjOqA6xc7JjviuVTxg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.7.0",
|
||||
"@typescript-eslint/types": "^8.41.0",
|
||||
"eslint-visitor-keys": "^4.2.1",
|
||||
"espree": "^10.4.0",
|
||||
"estraverse": "^5.3.0",
|
||||
"picomatch": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": ">=9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@stylistic/eslint-plugin/node_modules/eslint-visitor-keys": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
|
||||
"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@stylistic/eslint-plugin/node_modules/picomatch": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.20.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||
@@ -12708,9 +12756,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.8.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
|
||||
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
|
||||
"version": "5.9.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
|
||||
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
|
||||
@@ -99,6 +99,7 @@
|
||||
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"@shellygo/cypress-test-utils": "^6.0.1",
|
||||
"@stylistic/eslint-plugin": "^5.3.1",
|
||||
"@types/codemirror": "^5.60.16",
|
||||
"@types/color": "^4.2.0",
|
||||
"@types/cors": "^2.8.19",
|
||||
@@ -139,7 +140,7 @@
|
||||
"stylelint": "^16.24.0",
|
||||
"stylelint-config-recommended-scss": "^16.0.1",
|
||||
"stylelint-scss": "^6.12.1",
|
||||
"typescript": "^5.8.3",
|
||||
"typescript": "^5.9.2",
|
||||
"typescript-eslint": "^8.43.0",
|
||||
"uuid": "^13.0.0",
|
||||
"vite": "^7.1.5",
|
||||
|
||||
@@ -1,41 +1,41 @@
|
||||
import React from 'react'
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
import clamp from 'lodash.clamp'
|
||||
import buffer from 'buffer'
|
||||
import get from 'lodash.get'
|
||||
import {unset} from 'lodash'
|
||||
import {arrayMoveMutable} from 'array-move'
|
||||
import React from "react";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import clamp from "lodash.clamp";
|
||||
import buffer from "buffer";
|
||||
import get from "lodash.get";
|
||||
import {unset} from "lodash";
|
||||
import {arrayMoveMutable} from "array-move";
|
||||
import hash from "string-hash";
|
||||
import { PMTiles } from "pmtiles";
|
||||
import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
|
||||
import {validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import {type Map, type LayerSpecification, type StyleSpecification, type ValidationError, type SourceSpecification} from "maplibre-gl";
|
||||
import {validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
|
||||
import MapMaplibreGl from './MapMaplibreGl'
|
||||
import MapOpenLayers from './MapOpenLayers'
|
||||
import LayerList from './LayerList'
|
||||
import LayerEditor from './LayerEditor'
|
||||
import AppToolbar, { MapState } from './AppToolbar'
|
||||
import AppLayout from './AppLayout'
|
||||
import MessagePanel from './AppMessagePanel'
|
||||
import MapMaplibreGl from "./MapMaplibreGl";
|
||||
import MapOpenLayers from "./MapOpenLayers";
|
||||
import LayerList from "./LayerList";
|
||||
import LayerEditor from "./LayerEditor";
|
||||
import AppToolbar, { type MapState } from "./AppToolbar";
|
||||
import AppLayout from "./AppLayout";
|
||||
import MessagePanel from "./AppMessagePanel";
|
||||
|
||||
import ModalSettings from './modals/ModalSettings'
|
||||
import ModalExport from './modals/ModalExport'
|
||||
import ModalSources from './modals/ModalSources'
|
||||
import ModalOpen from './modals/ModalOpen'
|
||||
import ModalShortcuts from './modals/ModalShortcuts'
|
||||
import ModalDebug from './modals/ModalDebug'
|
||||
import ModalSettings from "./modals/ModalSettings";
|
||||
import ModalExport from "./modals/ModalExport";
|
||||
import ModalSources from "./modals/ModalSources";
|
||||
import ModalOpen from "./modals/ModalOpen";
|
||||
import ModalShortcuts from "./modals/ModalShortcuts";
|
||||
import ModalDebug from "./modals/ModalDebug";
|
||||
|
||||
import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
|
||||
import style from '../libs/style'
|
||||
import { undoMessages, redoMessages } from '../libs/diffmessage'
|
||||
import { createStyleStore, type IStyleStore } from '../libs/store/style-store-factory'
|
||||
import { RevisionStore } from '../libs/revisions'
|
||||
import LayerWatcher from '../libs/layerwatcher'
|
||||
import tokens from '../config/tokens.json'
|
||||
import isEqual from 'lodash.isequal'
|
||||
import { MapOptions } from 'maplibre-gl';
|
||||
import { OnStyleChangedOpts, StyleSpecificationWithId } from '../libs/definitions'
|
||||
import {downloadGlyphsMetadata, downloadSpriteMetadata} from "../libs/metadata";
|
||||
import style from "../libs/style";
|
||||
import { undoMessages, redoMessages } from "../libs/diffmessage";
|
||||
import { createStyleStore, type IStyleStore } from "../libs/store/style-store-factory";
|
||||
import { RevisionStore } from "../libs/revisions";
|
||||
import LayerWatcher from "../libs/layerwatcher";
|
||||
import tokens from "../config/tokens.json";
|
||||
import isEqual from "lodash.isequal";
|
||||
import { type MapOptions } from "maplibre-gl";
|
||||
import { type OnStyleChangedOpts, type StyleSpecificationWithId } from "../libs/definitions";
|
||||
|
||||
// Buffer must be defined globally for @maplibre/maplibre-gl-style-spec validate() function to succeed.
|
||||
window.Buffer = buffer.Buffer;
|
||||
@@ -46,21 +46,21 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
|
||||
const matchesThunderforest = url.match(/\.thunderforest\.com/);
|
||||
const matchesLocationIQ = url.match(/\.locationiq\.com/);
|
||||
if (matchesTilehosting || matchesMaptiler) {
|
||||
const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true})
|
||||
const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
|
||||
if (accessToken) {
|
||||
return url.replace('{key}', accessToken)
|
||||
return url.replace("{key}", accessToken);
|
||||
}
|
||||
}
|
||||
else if (matchesThunderforest) {
|
||||
const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true})
|
||||
const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true});
|
||||
if (accessToken) {
|
||||
return url.replace('{key}', accessToken)
|
||||
return url.replace("{key}", accessToken);
|
||||
}
|
||||
}
|
||||
else if (matchesLocationIQ) {
|
||||
const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true})
|
||||
const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true});
|
||||
if (accessToken) {
|
||||
return url.replace('{key}', accessToken)
|
||||
return url.replace("{key}", accessToken);
|
||||
}
|
||||
}
|
||||
else {
|
||||
@@ -78,7 +78,7 @@ function updateRootSpec(spec: any, fieldName: string, newValues: any) {
|
||||
values: newValues
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
type MappedErrors = {
|
||||
@@ -91,7 +91,7 @@ type MappedErrors = {
|
||||
message: string
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
type AppState = {
|
||||
errors: MappedErrors[],
|
||||
@@ -128,7 +128,7 @@ type AppState = {
|
||||
debug: boolean
|
||||
}
|
||||
fileHandle: FileSystemFileHandle | null
|
||||
}
|
||||
};
|
||||
|
||||
export default class App extends React.Component<any, AppState> {
|
||||
revisionStore: RevisionStore;
|
||||
@@ -136,7 +136,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
layerWatcher: LayerWatcher;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props)
|
||||
super(props);
|
||||
|
||||
this.revisionStore = new RevisionStore();
|
||||
this.configureKeyboardShortcuts();
|
||||
@@ -174,11 +174,11 @@ export default class App extends React.Component<any, AppState> {
|
||||
debugToolbox: false,
|
||||
},
|
||||
fileHandle: null,
|
||||
}
|
||||
};
|
||||
|
||||
this.layerWatcher = new LayerWatcher({
|
||||
onVectorLayersChange: v => this.setState({ vectorLayers: v })
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
configureKeyboardShortcuts = () => {
|
||||
@@ -233,7 +233,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
this.toggleModal("debug");
|
||||
}
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
document.body.addEventListener("keyup", (e) => {
|
||||
if(e.key === "Escape") {
|
||||
@@ -242,19 +242,19 @@ export default class App extends React.Component<any, AppState> {
|
||||
}
|
||||
else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
|
||||
const shortcut = shortcuts.find((shortcut) => {
|
||||
return (shortcut.key === e.key)
|
||||
})
|
||||
return (shortcut.key === e.key);
|
||||
});
|
||||
|
||||
if(shortcut) {
|
||||
this.setModal("shortcuts", false);
|
||||
shortcut.handler();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleKeyPress = (e: KeyboardEvent) => {
|
||||
if(navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
|
||||
if(navigator.platform.toUpperCase().indexOf("MAC") >= 0) {
|
||||
if(e.metaKey && e.shiftKey && e.keyCode === 90) {
|
||||
e.preventDefault();
|
||||
this.onRedo();
|
||||
@@ -274,7 +274,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
this.onRedo();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
this.styleStore = await createStyleStore((mapStyle, opts) => this.onStyleChanged(mapStyle, opts));
|
||||
@@ -286,33 +286,33 @@ export default class App extends React.Component<any, AppState> {
|
||||
}
|
||||
|
||||
saveStyle(snapshotStyle: StyleSpecificationWithId) {
|
||||
this.styleStore?.save(snapshotStyle)
|
||||
this.styleStore?.save(snapshotStyle);
|
||||
}
|
||||
|
||||
updateFonts(urlTemplate: string) {
|
||||
const metadata: {[key: string]: string} = this.state.mapStyle.metadata || {} as any
|
||||
const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
|
||||
const metadata: {[key: string]: string} = this.state.mapStyle.metadata || {} as any;
|
||||
const accessToken = metadata["maputnik:openmaptiles_access_token"] || tokens.openmaptiles;
|
||||
|
||||
const glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
|
||||
const glyphUrl = (typeof urlTemplate === "string")? urlTemplate.replace("{key}", accessToken): urlTemplate;
|
||||
downloadGlyphsMetadata(glyphUrl, fonts => {
|
||||
this.setState({ spec: updateRootSpec(this.state.spec, 'glyphs', fonts)})
|
||||
})
|
||||
this.setState({ spec: updateRootSpec(this.state.spec, "glyphs", fonts)});
|
||||
});
|
||||
}
|
||||
|
||||
updateIcons(baseUrl: string) {
|
||||
downloadSpriteMetadata(baseUrl, icons => {
|
||||
this.setState({ spec: updateRootSpec(this.state.spec, 'sprite', icons)})
|
||||
})
|
||||
this.setState({ spec: updateRootSpec(this.state.spec, "sprite", icons)});
|
||||
});
|
||||
}
|
||||
|
||||
onChangeMetadataProperty = (property: string, value: any) => {
|
||||
// If we're changing renderer reset the map state.
|
||||
if (
|
||||
property === 'maputnik:renderer' &&
|
||||
value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mlgljs')
|
||||
property === "maputnik:renderer" &&
|
||||
value !== get(this.state.mapStyle, ["metadata", "maputnik:renderer"], "mlgljs")
|
||||
) {
|
||||
this.setState({
|
||||
mapState: 'map'
|
||||
mapState: "map"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -322,10 +322,10 @@ export default class App extends React.Component<any, AppState> {
|
||||
...(this.state.mapStyle as any).metadata,
|
||||
[property]: value
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.onStyleChanged(changedStyle)
|
||||
}
|
||||
this.onStyleChanged(changedStyle);
|
||||
};
|
||||
|
||||
onStyleChanged = (newStyle: StyleSpecificationWithId, opts: OnStyleChangedOpts={}): void => {
|
||||
opts = {
|
||||
@@ -338,16 +338,16 @@ export default class App extends React.Component<any, AppState> {
|
||||
// For the style object, find the urls that has "{key}" and insert the correct API keys
|
||||
// Without this, going from e.g. MapTiler to OpenLayers and back will lose the maptlier key.
|
||||
|
||||
if (newStyle.glyphs && typeof newStyle.glyphs === 'string') {
|
||||
if (newStyle.glyphs && typeof newStyle.glyphs === "string") {
|
||||
newStyle.glyphs = setFetchAccessToken(newStyle.glyphs, newStyle);
|
||||
}
|
||||
|
||||
if (newStyle.sprite && typeof newStyle.sprite === 'string') {
|
||||
if (newStyle.sprite && typeof newStyle.sprite === "string") {
|
||||
newStyle.sprite = setFetchAccessToken(newStyle.sprite, newStyle);
|
||||
}
|
||||
|
||||
for (const [_sourceId, source] of Object.entries(newStyle.sources)) {
|
||||
if (source && 'url' in source && typeof source.url === 'string') {
|
||||
if (source && "url" in source && typeof source.url === "string") {
|
||||
source.url = setFetchAccessToken(source.url, newStyle);
|
||||
}
|
||||
}
|
||||
@@ -389,7 +389,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
message,
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Special case: Invalid source
|
||||
@@ -406,7 +406,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
message,
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
|
||||
@@ -423,7 +423,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
else {
|
||||
return {
|
||||
@@ -453,10 +453,10 @@ export default class App extends React.Component<any, AppState> {
|
||||
}
|
||||
|
||||
if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
|
||||
this.updateFonts(newStyle.glyphs as string)
|
||||
this.updateFonts(newStyle.glyphs as string);
|
||||
}
|
||||
if(newStyle.sprite !== this.state.mapStyle.sprite) {
|
||||
this.updateIcons(newStyle.sprite as string)
|
||||
this.updateIcons(newStyle.sprite as string);
|
||||
}
|
||||
|
||||
if (opts.addRevision) {
|
||||
@@ -473,28 +473,28 @@ export default class App extends React.Component<any, AppState> {
|
||||
}, () => {
|
||||
this.fetchSources();
|
||||
this.setStateInUrl();
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
onUndo = () => {
|
||||
const activeStyle = this.revisionStore.undo()
|
||||
const activeStyle = this.revisionStore.undo();
|
||||
|
||||
const messages = undoMessages(this.state.mapStyle, activeStyle)
|
||||
const messages = undoMessages(this.state.mapStyle, activeStyle);
|
||||
this.onStyleChanged(activeStyle, {addRevision: false});
|
||||
this.setState({
|
||||
infos: messages,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onRedo = () => {
|
||||
const activeStyle = this.revisionStore.redo()
|
||||
const messages = redoMessages(this.state.mapStyle, activeStyle)
|
||||
const activeStyle = this.revisionStore.redo();
|
||||
const messages = redoMessages(this.state.mapStyle, activeStyle);
|
||||
this.onStyleChanged(activeStyle, {addRevision: false});
|
||||
this.setState({
|
||||
infos: messages,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMoveLayer = (move: {oldIndex: number; newIndex: number}) => {
|
||||
let { oldIndex, newIndex } = move;
|
||||
@@ -512,97 +512,97 @@ export default class App extends React.Component<any, AppState> {
|
||||
layers = layers.slice(0);
|
||||
arrayMoveMutable(layers, oldIndex, newIndex);
|
||||
this.onLayersChange(layers);
|
||||
}
|
||||
};
|
||||
|
||||
onLayersChange = (changedLayers: LayerSpecification[]) => {
|
||||
const changedStyle = {
|
||||
...this.state.mapStyle,
|
||||
layers: changedLayers
|
||||
}
|
||||
this.onStyleChanged(changedStyle)
|
||||
}
|
||||
};
|
||||
this.onStyleChanged(changedStyle);
|
||||
};
|
||||
|
||||
onLayerDestroy = (index: number) => {
|
||||
const layers = this.state.mapStyle.layers;
|
||||
const remainingLayers = layers.slice(0);
|
||||
remainingLayers.splice(index, 1);
|
||||
this.onLayersChange(remainingLayers);
|
||||
}
|
||||
};
|
||||
|
||||
onLayerCopy = (index: number) => {
|
||||
const layers = this.state.mapStyle.layers;
|
||||
const changedLayers = layers.slice(0)
|
||||
const changedLayers = layers.slice(0);
|
||||
|
||||
const clonedLayer = cloneDeep(changedLayers[index])
|
||||
clonedLayer.id = clonedLayer.id + "-copy"
|
||||
changedLayers.splice(index, 0, clonedLayer)
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
const clonedLayer = cloneDeep(changedLayers[index]);
|
||||
clonedLayer.id = clonedLayer.id + "-copy";
|
||||
changedLayers.splice(index, 0, clonedLayer);
|
||||
this.onLayersChange(changedLayers);
|
||||
};
|
||||
|
||||
onLayerVisibilityToggle = (index: number) => {
|
||||
const layers = this.state.mapStyle.layers;
|
||||
const changedLayers = layers.slice(0)
|
||||
const changedLayers = layers.slice(0);
|
||||
|
||||
const layer = { ...changedLayers[index] }
|
||||
const changedLayout = 'layout' in layer ? {...layer.layout} : {}
|
||||
changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
|
||||
const layer = { ...changedLayers[index] };
|
||||
const changedLayout = "layout" in layer ? {...layer.layout} : {};
|
||||
changedLayout.visibility = changedLayout.visibility === "none" ? "visible" : "none";
|
||||
|
||||
layer.layout = changedLayout
|
||||
changedLayers[index] = layer
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
layer.layout = changedLayout;
|
||||
changedLayers[index] = layer;
|
||||
this.onLayersChange(changedLayers);
|
||||
};
|
||||
|
||||
|
||||
onLayerIdChange = (index: number, _oldId: string, newId: string) => {
|
||||
const changedLayers = this.state.mapStyle.layers.slice(0)
|
||||
const changedLayers = this.state.mapStyle.layers.slice(0);
|
||||
changedLayers[index] = {
|
||||
...changedLayers[index],
|
||||
id: newId
|
||||
}
|
||||
};
|
||||
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
this.onLayersChange(changedLayers);
|
||||
};
|
||||
|
||||
onLayerChanged = (index: number, layer: LayerSpecification) => {
|
||||
const changedLayers = this.state.mapStyle.layers.slice(0)
|
||||
changedLayers[index] = layer
|
||||
const changedLayers = this.state.mapStyle.layers.slice(0);
|
||||
changedLayers[index] = layer;
|
||||
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
this.onLayersChange(changedLayers);
|
||||
};
|
||||
|
||||
setMapState = (newState: MapState) => {
|
||||
this.setState({
|
||||
mapState: newState
|
||||
}, this.setStateInUrl);
|
||||
}
|
||||
};
|
||||
|
||||
setDefaultValues = (styleObj: StyleSpecificationWithId) => {
|
||||
const metadata: {[key: string]: string} = styleObj.metadata || {} as any
|
||||
if(metadata['maputnik:renderer'] === undefined) {
|
||||
const metadata: {[key: string]: string} = styleObj.metadata || {} as any;
|
||||
if(metadata["maputnik:renderer"] === undefined) {
|
||||
const changedStyle = {
|
||||
...styleObj,
|
||||
metadata: {
|
||||
...styleObj.metadata as any,
|
||||
'maputnik:renderer': 'mlgljs'
|
||||
"maputnik:renderer": "mlgljs"
|
||||
}
|
||||
}
|
||||
return changedStyle
|
||||
};
|
||||
return changedStyle;
|
||||
} else {
|
||||
return styleObj
|
||||
}
|
||||
return styleObj;
|
||||
}
|
||||
};
|
||||
|
||||
openStyle = (styleObj: StyleSpecificationWithId, fileHandle: FileSystemFileHandle | null) => {
|
||||
this.setState({fileHandle: fileHandle});
|
||||
styleObj = this.setDefaultValues(styleObj)
|
||||
this.onStyleChanged(styleObj)
|
||||
}
|
||||
styleObj = this.setDefaultValues(styleObj);
|
||||
this.onStyleChanged(styleObj);
|
||||
};
|
||||
|
||||
async fetchSources() {
|
||||
const sourceList: {[key: string]: SourceSpecification & {layers: string[]}} = {};
|
||||
for(const key of Object.keys(this.state.mapStyle.sources)) {
|
||||
const source = this.state.mapStyle.sources[key];
|
||||
if(source.type !== "vector" || !('url' in source)) {
|
||||
if(source.type !== "vector" || !("url" in source)) {
|
||||
sourceList[key] = this.state.sources[key] || {...this.state.mapStyle.sources[key]};
|
||||
if (sourceList[key].layers === undefined) {
|
||||
sourceList[key].layers = [];
|
||||
@@ -616,7 +616,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
let url = source.url;
|
||||
|
||||
try {
|
||||
url = setFetchAccessToken(url!, this.state.mapStyle)
|
||||
url = setFetchAccessToken(url!, this.state.mapStyle);
|
||||
} catch(err) {
|
||||
console.warn("Failed to setFetchAccessToken: ", err);
|
||||
}
|
||||
@@ -627,7 +627,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
}
|
||||
|
||||
for(const layer of json.vector_layers) {
|
||||
sourceList[key].layers.push(layer.id)
|
||||
sourceList[key].layers.push(layer.id);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -636,7 +636,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
const json = await (new PMTiles(url!.substring(10))).getTileJson("");
|
||||
setVectorLayers(json);
|
||||
} else {
|
||||
const response = await fetch(url!, { mode: 'cors' });
|
||||
const response = await fetch(url!, { mode: "cors" });
|
||||
const json = await response.json();
|
||||
setVectorLayers(json);
|
||||
}
|
||||
@@ -650,13 +650,13 @@ export default class App extends React.Component<any, AppState> {
|
||||
console.debug("Setting sources", sourceList);
|
||||
this.setState({
|
||||
sources: sourceList
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_getRenderer () {
|
||||
const metadata: {[key:string]: string} = this.state.mapStyle.metadata || {} as any;
|
||||
return metadata['maputnik:renderer'] || 'mlgljs';
|
||||
return metadata["maputnik:renderer"] || "mlgljs";
|
||||
}
|
||||
|
||||
onMapChange = (mapView: {
|
||||
@@ -669,7 +669,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
this.setState({
|
||||
mapView,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
mapRenderer() {
|
||||
const {mapStyle, dirtyMapStyle} = this.state;
|
||||
@@ -682,23 +682,23 @@ export default class App extends React.Component<any, AppState> {
|
||||
});
|
||||
},
|
||||
onDataChange: (e: {map: Map}) => {
|
||||
this.layerWatcher.analyzeMap(e.map)
|
||||
this.layerWatcher.analyzeMap(e.map);
|
||||
this.fetchSources();
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const renderer = this._getRenderer();
|
||||
|
||||
let mapElement;
|
||||
|
||||
// Check if OL code has been loaded?
|
||||
if(renderer === 'ol') {
|
||||
if(renderer === "ol") {
|
||||
mapElement = <MapOpenLayers
|
||||
{...mapProps}
|
||||
onChange={this.onMapChange}
|
||||
debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
|
||||
onLayerSelect={(layerId) => this.onLayerSelect(+layerId)}
|
||||
/>
|
||||
/>;
|
||||
} else {
|
||||
|
||||
mapElement = <MapMaplibreGl {...mapProps}
|
||||
@@ -706,7 +706,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
options={this.state.maplibreGlDebugOptions}
|
||||
inspectModeEnabled={this.state.mapState === "inspect"}
|
||||
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
|
||||
onLayerSelect={this.onLayerSelect} />
|
||||
onLayerSelect={this.onLayerSelect} />;
|
||||
}
|
||||
|
||||
let filterName;
|
||||
@@ -720,7 +720,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
|
||||
return <div style={elementStyle} className="maputnik-map__container" data-wd-key="maplibre:container">
|
||||
{mapElement}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
setStateInUrl = () => {
|
||||
@@ -749,7 +749,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
}
|
||||
|
||||
history.replaceState({selectedLayerIndex}, "Maputnik", url.href);
|
||||
}
|
||||
};
|
||||
|
||||
getInitialStateFromUrl = (mapStyle: StyleSpecification) => {
|
||||
const url = new URL(location.href);
|
||||
@@ -802,14 +802,14 @@ export default class App extends React.Component<any, AppState> {
|
||||
console.warn(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onLayerSelect = (index: number) => {
|
||||
this.setState({
|
||||
selectedLayerIndex: index,
|
||||
selectedLayerOriginalId: this.state.mapStyle.layers[index].id,
|
||||
}, this.setStateInUrl);
|
||||
}
|
||||
};
|
||||
|
||||
setModal(modalName: keyof AppState["isOpen"], value: boolean) {
|
||||
this.setState({
|
||||
@@ -817,7 +817,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
...this.state.isOpen,
|
||||
[modalName]: value
|
||||
}
|
||||
}, this.setStateInUrl)
|
||||
}, this.setStateInUrl);
|
||||
}
|
||||
|
||||
toggleModal(modalName: keyof AppState["isOpen"]) {
|
||||
@@ -826,7 +826,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
|
||||
onSetFileHandle = (fileHandle: FileSystemFileHandle | null) => {
|
||||
this.setState({ fileHandle });
|
||||
}
|
||||
};
|
||||
|
||||
onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
|
||||
this.setState({
|
||||
@@ -835,7 +835,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
[key]: value,
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onChangeMaplibreGlDebug = (key: keyof AppState["maplibreGlDebugOptions"], value: any) => {
|
||||
this.setState({
|
||||
@@ -844,11 +844,11 @@ export default class App extends React.Component<any, AppState> {
|
||||
[key]: value,
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const layers = this.state.mapStyle.layers || []
|
||||
const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : undefined
|
||||
const layers = this.state.mapStyle.layers || [];
|
||||
const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : undefined;
|
||||
|
||||
const toolbar = <AppToolbar
|
||||
renderer={this._getRenderer()}
|
||||
@@ -860,7 +860,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
onStyleOpen={this.onStyleChanged}
|
||||
onSetMapState={this.setMapState}
|
||||
onToggleModal={this.toggleModal.bind(this)}
|
||||
/>
|
||||
/>;
|
||||
|
||||
const layerList = <LayerList
|
||||
onMoveLayer={this.onMoveLayer}
|
||||
@@ -873,7 +873,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
layers={layers}
|
||||
sources={this.state.sources}
|
||||
errors={this.state.errors}
|
||||
/>
|
||||
/>;
|
||||
|
||||
const layerEditor = selectedLayer ? <LayerEditor
|
||||
key={this.state.selectedLayerOriginalId}
|
||||
@@ -891,7 +891,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
onLayerVisibilityToggle={this.onLayerVisibilityToggle}
|
||||
onLayerIdChange={this.onLayerIdChange}
|
||||
errors={this.state.errors}
|
||||
/> : undefined
|
||||
/> : undefined;
|
||||
|
||||
const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
|
||||
currentLayer={selectedLayer}
|
||||
@@ -900,7 +900,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
mapStyle={this.state.mapStyle}
|
||||
errors={this.state.errors}
|
||||
infos={this.state.infos}
|
||||
/> : undefined
|
||||
/> : undefined;
|
||||
|
||||
|
||||
const modals = <div>
|
||||
@@ -911,41 +911,41 @@ export default class App extends React.Component<any, AppState> {
|
||||
onChangeMaplibreGlDebug={this.onChangeMaplibreGlDebug}
|
||||
onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
|
||||
isOpen={this.state.isOpen.debug}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'debug')}
|
||||
onOpenToggle={this.toggleModal.bind(this, "debug")}
|
||||
mapView={this.state.mapView}
|
||||
/>
|
||||
<ModalShortcuts
|
||||
isOpen={this.state.isOpen.shortcuts}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
|
||||
onOpenToggle={this.toggleModal.bind(this, "shortcuts")}
|
||||
/>
|
||||
<ModalSettings
|
||||
mapStyle={this.state.mapStyle}
|
||||
onStyleChanged={this.onStyleChanged}
|
||||
onChangeMetadataProperty={this.onChangeMetadataProperty}
|
||||
isOpen={this.state.isOpen.settings}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'settings')}
|
||||
onOpenToggle={this.toggleModal.bind(this, "settings")}
|
||||
/>
|
||||
<ModalExport
|
||||
mapStyle={this.state.mapStyle}
|
||||
onStyleChanged={this.onStyleChanged}
|
||||
isOpen={this.state.isOpen.export}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'export')}
|
||||
onOpenToggle={this.toggleModal.bind(this, "export")}
|
||||
fileHandle={this.state.fileHandle}
|
||||
onSetFileHandle={this.onSetFileHandle}
|
||||
/>
|
||||
<ModalOpen
|
||||
isOpen={this.state.isOpen.open}
|
||||
onStyleOpen={this.openStyle}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'open')}
|
||||
onOpenToggle={this.toggleModal.bind(this, "open")}
|
||||
fileHandle={this.state.fileHandle}
|
||||
/>
|
||||
<ModalSources
|
||||
mapStyle={this.state.mapStyle}
|
||||
onStyleChanged={this.onStyleChanged}
|
||||
isOpen={this.state.isOpen.sources}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'sources')}
|
||||
onOpenToggle={this.toggleModal.bind(this, "sources")}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
return <AppLayout
|
||||
toolbar={toolbar}
|
||||
@@ -954,6 +954,6 @@ export default class App extends React.Component<any, AppState> {
|
||||
map={this.mapRenderer()}
|
||||
bottom={bottomPanel}
|
||||
modals={modals}
|
||||
/>
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import ScrollContainer from './ScrollContainer'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { IconContext } from 'react-icons';
|
||||
import React from "react";
|
||||
import ScrollContainer from "./ScrollContainer";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { IconContext } from "react-icons";
|
||||
|
||||
type AppLayoutInternalProps = {
|
||||
toolbar: React.ReactElement
|
||||
@@ -17,7 +17,7 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
|
||||
render() {
|
||||
document.body.dir = this.props.i18n.dir();
|
||||
|
||||
return <IconContext.Provider value={{size: '14px'}}>
|
||||
return <IconContext.Provider value={{size: "14px"}}>
|
||||
<div className="maputnik-layout">
|
||||
{this.props.toolbar}
|
||||
<div className="maputnik-layout-main">
|
||||
@@ -37,7 +37,7 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
|
||||
}
|
||||
{this.props.modals}
|
||||
</div>
|
||||
</IconContext.Provider>
|
||||
</IconContext.Provider>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import {formatLayerId} from '../libs/format';
|
||||
import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
|
||||
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import {formatLayerId} from "../libs/format";
|
||||
import {type LayerSpecification, type StyleSpecification} from "maplibre-gl";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type AppMessagePanelInternalProps = {
|
||||
errors?: unknown[]
|
||||
@@ -15,7 +15,7 @@ type AppMessagePanelInternalProps = {
|
||||
class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalProps> {
|
||||
static defaultProps = {
|
||||
onLayerSelect: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {t, selectedLayerIndex} = this.props;
|
||||
@@ -48,17 +48,17 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
|
||||
}
|
||||
return <p key={"error-"+idx} className="maputnik-message-panel-error">
|
||||
{content}
|
||||
</p>
|
||||
})
|
||||
</p>;
|
||||
});
|
||||
|
||||
const infos = this.props.infos?.map((m, i) => {
|
||||
return <p key={"info-"+i}>{m}</p>
|
||||
})
|
||||
return <p key={"info-"+i}>{m}</p>;
|
||||
});
|
||||
|
||||
return <div className="maputnik-message-panel">
|
||||
{errors}
|
||||
{infos}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import {detect} from 'detect-browser';
|
||||
import React from "react";
|
||||
import classnames from "classnames";
|
||||
import {detect} from "detect-browser";
|
||||
|
||||
import {
|
||||
MdOpenInBrowser,
|
||||
@@ -10,17 +10,17 @@ import {
|
||||
MdFindInPage,
|
||||
MdLanguage,
|
||||
MdSave
|
||||
} from 'react-icons/md'
|
||||
import pkgJson from '../../package.json'
|
||||
} from "react-icons/md";
|
||||
import pkgJson from "../../package.json";
|
||||
//@ts-ignore
|
||||
import maputnikLogo from 'maputnik-design/logos/logo-color.svg?inline'
|
||||
import { withTranslation, WithTranslation } from 'react-i18next';
|
||||
import { supportedLanguages } from '../i18n';
|
||||
import type { OnStyleChangedCallback } from '../libs/definitions';
|
||||
import maputnikLogo from "maputnik-design/logos/logo-color.svg?inline";
|
||||
import { withTranslation, type WithTranslation } from "react-i18next";
|
||||
import { supportedLanguages } from "../i18n";
|
||||
import type { OnStyleChangedCallback } from "../libs/definitions";
|
||||
|
||||
// This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
|
||||
const browser = detect();
|
||||
const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser!.name) > -1;
|
||||
const colorAccessibilityFiltersEnabled = ["chrome", "firefox"].indexOf(browser!.name) > -1;
|
||||
|
||||
|
||||
type IconTextProps = {
|
||||
@@ -30,7 +30,7 @@ type IconTextProps = {
|
||||
|
||||
class IconText extends React.Component<IconTextProps> {
|
||||
render() {
|
||||
return <span className="maputnik-icon-text">{this.props.children}</span>
|
||||
return <span className="maputnik-icon-text">{this.props.children}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,14 +44,14 @@ type ToolbarLinkProps = {
|
||||
class ToolbarLink extends React.Component<ToolbarLinkProps> {
|
||||
render() {
|
||||
return <a
|
||||
className={classnames('maputnik-toolbar-link', this.props.className)}
|
||||
className={classnames("maputnik-toolbar-link", this.props.className)}
|
||||
href={this.props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
data-wd-key="toolbar:link"
|
||||
>
|
||||
{this.props.children}
|
||||
</a>
|
||||
</a>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@ class ToolbarSelect extends React.Component<ToolbarSelectProps> {
|
||||
data-wd-key={this.props.wdKey}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@ class ToolbarAction extends React.Component<ToolbarActionProps> {
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{this.props.children}
|
||||
</button>
|
||||
</button>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,7 +115,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
|
||||
add: false,
|
||||
export: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleSelection(val: MapState) {
|
||||
this.props.onSetMapState(val);
|
||||
@@ -133,7 +133,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
|
||||
const el = document.querySelector("#skip-target-"+target) as HTMLButtonElement;
|
||||
el.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
@@ -147,7 +147,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
|
||||
id: "inspect",
|
||||
group: "general",
|
||||
title: t("Inspect"),
|
||||
disabled: this.props.renderer === 'ol',
|
||||
disabled: this.props.renderer === "ol",
|
||||
},
|
||||
{
|
||||
id: "filter-deuteranopia",
|
||||
@@ -220,19 +220,19 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
|
||||
</a>
|
||||
</div>
|
||||
<div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
|
||||
<ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
|
||||
<ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, "open")}>
|
||||
<MdOpenInBrowser />
|
||||
<IconText>{t("Open")}</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
|
||||
<ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, "export")}>
|
||||
<MdSave />
|
||||
<IconText>{t("Save")}</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
|
||||
<ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, "sources")}>
|
||||
<MdLayers />
|
||||
<IconText>{t("Data Sources")}</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
|
||||
<ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, "settings")}>
|
||||
<MdSettings />
|
||||
<IconText>{t("Style Settings")}</IconText>
|
||||
</ToolbarAction>
|
||||
@@ -292,7 +292,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
|
||||
</ToolbarLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, {PropsWithChildren, SyntheticEvent} from 'react'
|
||||
import classnames from 'classnames'
|
||||
import FieldDocLabel from './FieldDocLabel'
|
||||
import Doc from './Doc'
|
||||
import React, {type PropsWithChildren, type SyntheticEvent} from "react";
|
||||
import classnames from "classnames";
|
||||
import FieldDocLabel from "./FieldDocLabel";
|
||||
import Doc from "./Doc";
|
||||
|
||||
type BlockProps = PropsWithChildren & {
|
||||
"data-wd-key"?: string
|
||||
@@ -26,13 +26,13 @@ export default class Block extends React.Component<BlockProps, BlockState> {
|
||||
super(props);
|
||||
this.state = {
|
||||
showDoc: false,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
onChange(e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) {
|
||||
const value = e.target.value
|
||||
const value = e.target.value;
|
||||
if (this.props.onChange) {
|
||||
return this.props.onChange(value === "" ? undefined : value)
|
||||
return this.props.onChange(value === "" ? undefined : value);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
|
||||
this.setState({
|
||||
showDoc: val
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Some fields for example <InputColor/> bind click events inside the element
|
||||
@@ -58,7 +58,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
|
||||
if (event.nativeEvent.target.nodeName !== "A") {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return <label style={this.props.style}
|
||||
@@ -87,17 +87,17 @@ export default class Block extends React.Component<BlockProps, BlockState> {
|
||||
<div className="maputnik-input-block-action">
|
||||
{this.props.action}
|
||||
</div>
|
||||
<div className="maputnik-input-block-content" ref={el => {this._blockEl = el}}>
|
||||
<div className="maputnik-input-block-content" ref={el => {this._blockEl = el;}}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
{this.props.fieldSpec &&
|
||||
<div
|
||||
className="maputnik-doc-inline"
|
||||
style={{display: this.state.showDoc ? '' : 'none'}}
|
||||
style={{display: this.state.showDoc ? "" : "none"}}
|
||||
>
|
||||
<Doc fieldSpec={this.props.fieldSpec} />
|
||||
</div>
|
||||
}
|
||||
</label>
|
||||
</label>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import { Collapse as ReactCollapse } from 'react-collapse'
|
||||
import {reducedMotionEnabled} from '../libs/accessibility'
|
||||
import React from "react";
|
||||
import { Collapse as ReactCollapse } from "react-collapse";
|
||||
import {reducedMotionEnabled} from "../libs/accessibility";
|
||||
|
||||
|
||||
type CollapseProps = {
|
||||
@@ -12,7 +12,7 @@ type CollapseProps = {
|
||||
export default class Collapse extends React.Component<CollapseProps> {
|
||||
static defaultProps = {
|
||||
isActive: true
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
if (reducedMotionEnabled()) {
|
||||
@@ -20,14 +20,14 @@ export default class Collapse extends React.Component<CollapseProps> {
|
||||
<div style={{display: this.props.isActive ? "block" : "none"}}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<ReactCollapse isOpened={this.props.isActive}>
|
||||
{this.props.children}
|
||||
</ReactCollapse>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
|
||||
import React from "react";
|
||||
import {MdArrowDropDown, MdArrowDropUp} from "react-icons/md";
|
||||
|
||||
type CollapserProps = {
|
||||
isCollapsed: boolean
|
||||
@@ -12,7 +12,7 @@ export default class Collapser extends React.Component<CollapserProps> {
|
||||
width: 20,
|
||||
height: 20,
|
||||
...this.props.style,
|
||||
}
|
||||
return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
|
||||
};
|
||||
return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
const headers = {
|
||||
js: "JS",
|
||||
@@ -15,7 +15,7 @@ type DocProps = {
|
||||
doc?: string
|
||||
}
|
||||
}
|
||||
'sdk-support'?: {
|
||||
"sdk-support"?: {
|
||||
[key: string]: typeof headers
|
||||
}
|
||||
docUrl?: string,
|
||||
@@ -28,7 +28,7 @@ export default class Doc extends React.Component<DocProps> {
|
||||
const {fieldSpec} = this.props;
|
||||
|
||||
const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
|
||||
const sdkSupport = fieldSpec['sdk-support'];
|
||||
const sdkSupport = fieldSpec["sdk-support"];
|
||||
|
||||
const renderValues = (
|
||||
!!values &&
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import InputArray, { InputArrayProps } from './InputArray'
|
||||
import Fieldset from './Fieldset'
|
||||
import InputArray, { type InputArrayProps } from "./InputArray";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
type FieldArrayProps = InputArrayProps & {
|
||||
name?: string
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Block from './Block'
|
||||
import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
|
||||
import Block from "./Block";
|
||||
import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
|
||||
|
||||
|
||||
type FieldAutocompleteProps = InputAutocompleteProps & {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Block from './Block'
|
||||
import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
|
||||
import Block from "./Block";
|
||||
import InputCheckbox, {type InputCheckboxProps} from "./InputCheckbox";
|
||||
|
||||
|
||||
type FieldCheckboxProps = InputCheckboxProps & {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Block from './Block'
|
||||
import InputColor, {InputColorProps} from './InputColor'
|
||||
import Block from "./Block";
|
||||
import InputColor, {type InputColorProps} from "./InputColor";
|
||||
|
||||
|
||||
type FieldColorProps = InputColorProps & {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import Block from './Block'
|
||||
import InputString from './InputString'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import Block from "./Block";
|
||||
import InputString from "./InputString";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldCommentInternalProps = {
|
||||
value?: string
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { JSX } from 'react'
|
||||
import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
|
||||
import React, { type JSX } from "react";
|
||||
import {MdInfoOutline, MdHighlightOff} from "react-icons/md";
|
||||
|
||||
type FieldDocLabelProps = {
|
||||
label: JSX.Element | string | undefined
|
||||
@@ -28,12 +28,12 @@ const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
|
||||
<label className="maputnik-doc-wrapper">
|
||||
<div className="maputnik-doc-target">
|
||||
{label}
|
||||
{'\xa0'}
|
||||
{"\xa0"}
|
||||
<button
|
||||
aria-label={open ? 'close property documentation' : 'open property documentation'}
|
||||
className={`maputnik-doc-button maputnik-doc-button--${open ? 'open' : 'closed'}`}
|
||||
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}
|
||||
data-wd-key={"field-doc-button-" + label}
|
||||
>
|
||||
{open ? <MdHighlightOff /> : <MdInfoOutline />}
|
||||
</button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import InputDynamicArray, {InputDynamicArrayProps} from './InputDynamicArray'
|
||||
import Fieldset from './Fieldset'
|
||||
import InputDynamicArray, {type InputDynamicArrayProps} from "./InputDynamicArray";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
type FieldDynamicArrayProps = InputDynamicArrayProps & {
|
||||
name?: string
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import InputEnum, {InputEnumProps} from './InputEnum'
|
||||
import Fieldset from './Fieldset';
|
||||
import InputEnum, {type InputEnumProps} from "./InputEnum";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
|
||||
type FieldEnumProps = InputEnumProps & {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import SpecProperty from './_SpecProperty'
|
||||
import DataProperty, { Stop } from './_DataProperty'
|
||||
import ZoomProperty from './_ZoomProperty'
|
||||
import ExpressionProperty from './_ExpressionProperty'
|
||||
import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
|
||||
import {findDefaultFromSpec} from '../libs/spec-helper';
|
||||
import SpecProperty from "./_SpecProperty";
|
||||
import DataProperty, { type Stop } from "./_DataProperty";
|
||||
import ZoomProperty from "./_ZoomProperty";
|
||||
import ExpressionProperty from "./_ExpressionProperty";
|
||||
import {function as styleFunction} from "@maplibre/maplibre-gl-style-spec";
|
||||
import {findDefaultFromSpec} from "../libs/spec-helper";
|
||||
|
||||
|
||||
function isLiteralExpression(value: any) {
|
||||
@@ -22,9 +22,9 @@ function isGetExpression(value: any) {
|
||||
|
||||
function isZoomField(value: any) {
|
||||
return (
|
||||
typeof(value) === 'object' &&
|
||||
typeof(value) === "object" &&
|
||||
value.stops &&
|
||||
typeof(value.property) === 'undefined' &&
|
||||
typeof(value.property) === "undefined" &&
|
||||
Array.isArray(value.stops) &&
|
||||
value.stops.length > 1 &&
|
||||
value.stops.every((stop: Stop) => {
|
||||
@@ -38,7 +38,7 @@ function isZoomField(value: any) {
|
||||
|
||||
function isIdentityProperty(value: any) {
|
||||
return (
|
||||
typeof(value) === 'object' &&
|
||||
typeof(value) === "object" &&
|
||||
value.type === "identity" &&
|
||||
Object.prototype.hasOwnProperty.call(value, "property")
|
||||
);
|
||||
@@ -46,16 +46,16 @@ function isIdentityProperty(value: any) {
|
||||
|
||||
function isDataStopProperty(value: any) {
|
||||
return (
|
||||
typeof(value) === 'object' &&
|
||||
typeof(value) === "object" &&
|
||||
value.stops &&
|
||||
typeof(value.property) !== 'undefined' &&
|
||||
typeof(value.property) !== "undefined" &&
|
||||
value.stops.length > 1 &&
|
||||
Array.isArray(value.stops) &&
|
||||
value.stops.every((stop: Stop) => {
|
||||
return (
|
||||
Array.isArray(stop) &&
|
||||
stop.length === 2 &&
|
||||
typeof(stop[0]) === 'object'
|
||||
typeof(stop[0]) === "object"
|
||||
);
|
||||
})
|
||||
);
|
||||
@@ -141,18 +141,18 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
|
||||
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";
|
||||
};
|
||||
|
||||
const addStop = () => {
|
||||
const stops = props.value.stops.slice(0);
|
||||
const lastStop = stops[stops.length - 1];
|
||||
if (typeof lastStop[0] === 'object') {
|
||||
if (typeof lastStop[0] === "object") {
|
||||
stops.push([
|
||||
{ zoom: lastStop[0].zoom + 1, value: lastStop[0].value },
|
||||
lastStop[1],
|
||||
@@ -172,7 +172,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
const deleteExpression = () => {
|
||||
const { fieldSpec, fieldName } = props;
|
||||
props.onChange(fieldName, fieldSpec.default);
|
||||
setDataType('value');
|
||||
setDataType("value");
|
||||
};
|
||||
|
||||
const deleteStop = (stopIdx: number) => {
|
||||
@@ -195,7 +195,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
const { value } = props;
|
||||
|
||||
let zoomFunc: any;
|
||||
if (typeof value === 'object') {
|
||||
if (typeof value === "object") {
|
||||
if (value.stops) {
|
||||
zoomFunc = {
|
||||
base: value.base,
|
||||
@@ -229,13 +229,13 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
|
||||
if (isGetExpression(value)) {
|
||||
props.onChange(fieldName, {
|
||||
type: 'identity',
|
||||
type: "identity",
|
||||
property: value[1],
|
||||
});
|
||||
setDataType('value');
|
||||
setDataType("value");
|
||||
} else if (isLiteralExpression(value)) {
|
||||
props.onChange(fieldName, value[1]);
|
||||
setDataType('value');
|
||||
setDataType("value");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -245,7 +245,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
isGetExpression(value) ||
|
||||
isLiteralExpression(value) ||
|
||||
isPrimative(value) ||
|
||||
(Array.isArray(value) && fieldSpec.type === 'array')
|
||||
(Array.isArray(value) && fieldSpec.type === "array")
|
||||
);
|
||||
};
|
||||
|
||||
@@ -253,26 +253,26 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
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];
|
||||
expression = ["get", value.property];
|
||||
} else {
|
||||
expression = ['literal', value || props.fieldSpec.default];
|
||||
expression = ["literal", value || props.fieldSpec.default];
|
||||
}
|
||||
props.onChange(props.fieldName, expression);
|
||||
};
|
||||
|
||||
const makeDataFunction = () => {
|
||||
const functionType = getFieldFunctionType(props.fieldSpec);
|
||||
const stopValue = functionType === 'categorical' ? '' : 0;
|
||||
const stopValue = functionType === "categorical" ? "" : 0;
|
||||
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) => {
|
||||
@@ -281,7 +281,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
};
|
||||
} else {
|
||||
dataFunc = {
|
||||
property: '',
|
||||
property: "",
|
||||
type: functionType,
|
||||
base: value.base,
|
||||
stops: [
|
||||
@@ -292,7 +292,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
}
|
||||
} else {
|
||||
dataFunc = {
|
||||
property: '',
|
||||
property: "",
|
||||
type: functionType,
|
||||
base: value.base,
|
||||
stops: [
|
||||
@@ -328,11 +328,11 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
};
|
||||
|
||||
const propClass =
|
||||
props.fieldSpec.default === props.value ? 'maputnik-default-property' : 'maputnik-modified-property';
|
||||
props.fieldSpec.default === props.value ? "maputnik-default-property" : "maputnik-modified-property";
|
||||
|
||||
let specField;
|
||||
|
||||
if (dataType === 'expression') {
|
||||
if (dataType === "expression") {
|
||||
specField = (
|
||||
<ExpressionProperty
|
||||
errors={props.errors}
|
||||
@@ -348,7 +348,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
onBlur={onUnmarkEditing}
|
||||
/>
|
||||
);
|
||||
} else if (dataType === 'zoom_function') {
|
||||
} else if (dataType === "zoom_function") {
|
||||
specField = (
|
||||
<ZoomProperty
|
||||
errors={props.errors}
|
||||
@@ -363,7 +363,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
onExpressionClick={makeExpression}
|
||||
/>
|
||||
);
|
||||
} else if (dataType === 'data_function') {
|
||||
} else if (dataType === "data_function") {
|
||||
specField = (
|
||||
<DataProperty
|
||||
errors={props.errors}
|
||||
@@ -396,7 +396,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={propClass} data-wd-key={'spec-field-container:' + props.fieldName}>
|
||||
<div className={propClass} data-wd-key={"spec-field-container:" + props.fieldName}>
|
||||
{specField}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import Block from './Block'
|
||||
import InputString from './InputString'
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import Block from "./Block";
|
||||
import InputString from "./InputString";
|
||||
|
||||
type FieldIdProps = {
|
||||
value: string
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import InputJson, {InputJsonProps} from './InputJson'
|
||||
import InputJson, {type InputJsonProps} from "./InputJson";
|
||||
|
||||
|
||||
type FieldJsonProps = InputJsonProps & {};
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import Block from './Block'
|
||||
import InputNumber from './InputNumber'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import Block from "./Block";
|
||||
import InputNumber from "./InputNumber";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldMaxZoomInternalProps = {
|
||||
value?: number
|
||||
@@ -14,7 +14,7 @@ type FieldMaxZoomInternalProps = {
|
||||
const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
return (
|
||||
<Block label={t('Max Zoom')} fieldSpec={latest.layer.maxzoom}
|
||||
<Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
|
||||
error={props.error}
|
||||
data-wd-key="max-zoom"
|
||||
>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import Block from './Block'
|
||||
import InputNumber from './InputNumber'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import Block from "./Block";
|
||||
import InputNumber from "./InputNumber";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldMinZoomInternalProps = {
|
||||
value?: number
|
||||
@@ -14,7 +14,7 @@ type FieldMinZoomInternalProps = {
|
||||
const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
|
||||
const t = props.t;
|
||||
return (
|
||||
<Block label={t('Min Zoom')} fieldSpec={latest.layer.minzoom}
|
||||
<Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
|
||||
error={props.error}
|
||||
data-wd-key="min-zoom"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
|
||||
import Fieldset from './Fieldset'
|
||||
import InputMultiInput, {type InputMultiInputProps} from "./InputMultiInput";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
|
||||
type FieldMultiInputProps = InputMultiInputProps & {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import InputNumber, {InputNumberProps} from './InputNumber'
|
||||
import Block from './Block'
|
||||
import InputNumber, {type InputNumberProps} from "./InputNumber";
|
||||
import Block from "./Block";
|
||||
|
||||
|
||||
type FieldNumberProps = InputNumberProps & {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Block from './Block'
|
||||
import InputSelect, {InputSelectProps} from './InputSelect'
|
||||
import Block from "./Block";
|
||||
import InputSelect, {type InputSelectProps} from "./InputSelect";
|
||||
|
||||
|
||||
type FieldSelectProps = InputSelectProps & {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import Block from './Block'
|
||||
import InputAutocomplete from './InputAutocomplete'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import Block from "./Block";
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldSourceInternalProps = {
|
||||
value?: string
|
||||
@@ -23,7 +23,7 @@ const FieldSourceInternal: React.FC<FieldSourceInternalProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<Block
|
||||
label={t('Source')}
|
||||
label={t("Source")}
|
||||
fieldSpec={latest.layer.source}
|
||||
error={error}
|
||||
data-wd-key={wdKey}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import {latest} from '@maplibre/maplibre-gl-style-spec'
|
||||
import Block from './Block'
|
||||
import InputAutocomplete from './InputAutocomplete'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import {latest} from "@maplibre/maplibre-gl-style-spec";
|
||||
import Block from "./Block";
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FieldSourceLayerInternalProps = {
|
||||
value?: string
|
||||
@@ -21,8 +21,8 @@ const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<Block
|
||||
label={t('Source Layer')}
|
||||
fieldSpec={latest.layer['source-layer']}
|
||||
label={t("Source Layer")}
|
||||
fieldSpec={latest.layer["source-layer"]}
|
||||
data-wd-key="layer-source-layer"
|
||||
error={error}
|
||||
>
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
import Block from './Block'
|
||||
import InputSpec, { FieldSpecType, InputSpecProps } from './InputSpec'
|
||||
import Fieldset from './Fieldset'
|
||||
import Block from "./Block";
|
||||
import InputSpec, { type FieldSpecType, type InputSpecProps } from "./InputSpec";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[] }): typeof Fieldset | typeof Block {
|
||||
switch(fieldSpec.type) {
|
||||
case 'color':
|
||||
case "color":
|
||||
return Block;
|
||||
case 'enum':
|
||||
return (Object.keys(fieldSpec.values!).length <= 3 ? Fieldset : Block)
|
||||
case 'boolean':
|
||||
case "enum":
|
||||
return (Object.keys(fieldSpec.values!).length <= 3 ? Fieldset : Block);
|
||||
case "boolean":
|
||||
return Block;
|
||||
case 'array':
|
||||
case "array":
|
||||
return Fieldset;
|
||||
case 'resolvedImage':
|
||||
case "resolvedImage":
|
||||
return Block;
|
||||
case 'number':
|
||||
case "number":
|
||||
return Block;
|
||||
case 'string':
|
||||
case "string":
|
||||
return Block;
|
||||
case 'formatted':
|
||||
case "formatted":
|
||||
return Block;
|
||||
case 'padding':
|
||||
case "padding":
|
||||
return Block;
|
||||
case 'numberArray':
|
||||
case "numberArray":
|
||||
return Fieldset;
|
||||
case 'colorArray':
|
||||
case "colorArray":
|
||||
return Fieldset;
|
||||
case 'variableAnchorOffsetCollection':
|
||||
case "variableAnchorOffsetCollection":
|
||||
return Fieldset;
|
||||
default:
|
||||
console.warn("No such type for: " + fieldSpec.type);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Block from './Block'
|
||||
import InputString, {InputStringProps} from './InputString'
|
||||
import Block from "./Block";
|
||||
import InputString, {type InputStringProps} from "./InputString";
|
||||
|
||||
type FieldStringProps = InputStringProps & {
|
||||
name?: string
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react'
|
||||
import {v8} from '@maplibre/maplibre-gl-style-spec'
|
||||
import Block from './Block'
|
||||
import InputSelect from './InputSelect'
|
||||
import InputString from './InputString'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { startCase } from 'lodash'
|
||||
import React from "react";
|
||||
import {v8} from "@maplibre/maplibre-gl-style-spec";
|
||||
import Block from "./Block";
|
||||
import InputSelect from "./InputSelect";
|
||||
import InputString from "./InputString";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { startCase } from "lodash";
|
||||
|
||||
type FieldTypeInternalProps = {
|
||||
value: string
|
||||
@@ -22,9 +22,9 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
|
||||
error,
|
||||
disabled = false
|
||||
}) => {
|
||||
const layerstypes: [string, string][] = Object.keys(v8.layer.type.values || {}).map(v => [v, startCase(v.replace(/-/g, ' '))]);
|
||||
const layerstypes: [string, string][] = Object.keys(v8.layer.type.values || {}).map(v => [v, startCase(v.replace(/-/g, " "))]);
|
||||
return (
|
||||
<Block label={t('Type')} fieldSpec={v8.layer.type}
|
||||
<Block label={t("Type")} fieldSpec={v8.layer.type}
|
||||
data-wd-key={wdKey}
|
||||
error={error}
|
||||
>
|
||||
@@ -36,7 +36,7 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
|
||||
options={layerstypes}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
data-wd-key={wdKey + '.select'}
|
||||
data-wd-key={wdKey + ".select"}
|
||||
/>
|
||||
)}
|
||||
</Block>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
|
||||
import Block from './Block'
|
||||
import InputUrl, {type FieldUrlProps as InputUrlProps} from "./InputUrl";
|
||||
import Block from "./Block";
|
||||
|
||||
|
||||
type FieldUrlProps = InputUrlProps & {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { PropsWithChildren, ReactElement } from 'react'
|
||||
import FieldDocLabel from './FieldDocLabel'
|
||||
import Doc from './Doc'
|
||||
import generateUniqueId from '../libs/document-uid';
|
||||
import React, { type PropsWithChildren, type ReactElement } from "react";
|
||||
import FieldDocLabel from "./FieldDocLabel";
|
||||
import Doc from "./Doc";
|
||||
import generateUniqueId from "../libs/document-uid";
|
||||
|
||||
type FieldsetProps = PropsWithChildren & {
|
||||
label?: string,
|
||||
@@ -12,7 +12,7 @@ type FieldsetProps = PropsWithChildren & {
|
||||
|
||||
const Fieldset: React.FC<FieldsetProps> = (props) => {
|
||||
const [showDoc, setShowDoc] = React.useState(false);
|
||||
const labelId = React.useRef(generateUniqueId('fieldset_label_'));
|
||||
const labelId = React.useRef(generateUniqueId("fieldset_label_"));
|
||||
|
||||
const onToggleDoc = (val: boolean) => {
|
||||
setShowDoc(val);
|
||||
@@ -37,7 +37,7 @@ const Fieldset: React.FC<FieldsetProps> = (props) => {
|
||||
<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' }}>
|
||||
<div className="maputnik-doc-inline" style={{ display: showDoc ? "" : "none" }}>
|
||||
<Doc fieldSpec={props.fieldSpec} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import React from 'react'
|
||||
import {mdiTableRowPlusAfter} from '@mdi/js';
|
||||
import {isEqual} from 'lodash';
|
||||
import {ExpressionSpecification, LegacyFilterSpecification} from 'maplibre-gl'
|
||||
import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
|
||||
import {mdiFunctionVariant} from '@mdi/js';
|
||||
import React from "react";
|
||||
import {mdiTableRowPlusAfter} from "@mdi/js";
|
||||
import {isEqual} from "lodash";
|
||||
import {type ExpressionSpecification, type LegacyFilterSpecification} from "maplibre-gl";
|
||||
import {latest, migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
|
||||
import {mdiFunctionVariant} from "@mdi/js";
|
||||
|
||||
import {combiningFilterOps} from '../libs/filterops'
|
||||
import InputSelect from './InputSelect'
|
||||
import Block from './Block'
|
||||
import SingleFilterEditor from './SingleFilterEditor'
|
||||
import FilterEditorBlock from './FilterEditorBlock'
|
||||
import InputButton from './InputButton'
|
||||
import Doc from './Doc'
|
||||
import ExpressionProperty from './_ExpressionProperty';
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import type { StyleSpecificationWithId } from '../libs/definitions';
|
||||
import {combiningFilterOps} from "../libs/filterops";
|
||||
import InputSelect from "./InputSelect";
|
||||
import Block from "./Block";
|
||||
import SingleFilterEditor from "./SingleFilterEditor";
|
||||
import FilterEditorBlock from "./FilterEditorBlock";
|
||||
import InputButton from "./InputButton";
|
||||
import Doc from "./Doc";
|
||||
import ExpressionProperty from "./_ExpressionProperty";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import type { StyleSpecificationWithId } from "../libs/definitions";
|
||||
|
||||
|
||||
function combiningFilter(props: FilterEditorInternalProps): LegacyFilterSpecification | ExpressionSpecification {
|
||||
const filter = props.filter || ['all'];
|
||||
const filter = props.filter || ["all"];
|
||||
|
||||
if (!Array.isArray(filter)) {
|
||||
return filter;
|
||||
@@ -28,7 +28,7 @@ function combiningFilter(props: FilterEditorInternalProps): LegacyFilterSpecific
|
||||
let filters = filter.slice(1);
|
||||
|
||||
if(combiningFilterOps.indexOf(combiningOp) < 0) {
|
||||
combiningOp = 'all';
|
||||
combiningOp = "all";
|
||||
filters = [filter.slice(0)];
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@ function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpe
|
||||
"sources": {
|
||||
"tmp": {
|
||||
"type": "geojson",
|
||||
"data": ''
|
||||
"data": ""
|
||||
}
|
||||
},
|
||||
"sprite": "",
|
||||
@@ -81,14 +81,14 @@ function checkIfSimpleFilter (filter: LegacyFilterSpecification | ExpressionSpec
|
||||
}
|
||||
|
||||
function hasCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
|
||||
return combiningFilterOps.indexOf(filter[0]) >= 0
|
||||
return combiningFilterOps.indexOf(filter[0]) >= 0;
|
||||
}
|
||||
|
||||
function hasNestedCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
|
||||
if(hasCombiningFilter(filter)) {
|
||||
return filter.slice(1).map(f => hasCombiningFilter(f as any)).filter(f => f == true).length > 0
|
||||
return filter.slice(1).map(f => hasCombiningFilter(f as any)).filter(f => f == true).length > 0;
|
||||
}
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
|
||||
type FilterEditorInternalProps = {
|
||||
@@ -108,7 +108,7 @@ type FilterEditorState = {
|
||||
class FilterEditorInternal extends React.Component<FilterEditorInternalProps, FilterEditorState> {
|
||||
static defaultProps = {
|
||||
filter: ["all"],
|
||||
}
|
||||
};
|
||||
|
||||
constructor (props: FilterEditorInternalProps) {
|
||||
super(props);
|
||||
@@ -120,42 +120,42 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
|
||||
// Convert filter to combining filter
|
||||
onFilterPartChanged(filterIdx: number, newPart: any[]) {
|
||||
const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
|
||||
newFilter[filterIdx] = newPart
|
||||
this.props.onChange(newFilter)
|
||||
const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification;
|
||||
newFilter[filterIdx] = newPart;
|
||||
this.props.onChange(newFilter);
|
||||
}
|
||||
|
||||
deleteFilterItem(filterIdx: number) {
|
||||
const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
|
||||
newFilter.splice(filterIdx + 1, 1)
|
||||
this.props.onChange(newFilter)
|
||||
const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification;
|
||||
newFilter.splice(filterIdx + 1, 1);
|
||||
this.props.onChange(newFilter);
|
||||
}
|
||||
|
||||
addFilterItem = () => {
|
||||
const newFilterItem = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
|
||||
(newFilterItem as any[]).push(['==', 'name', ''])
|
||||
this.props.onChange(newFilterItem)
|
||||
}
|
||||
const newFilterItem = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification;
|
||||
(newFilterItem as any[]).push(["==", "name", ""]);
|
||||
this.props.onChange(newFilterItem);
|
||||
};
|
||||
|
||||
onToggleDoc = (val: boolean) => {
|
||||
this.setState({
|
||||
showDoc: val
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
makeFilter = () => {
|
||||
this.setState({
|
||||
displaySimpleFilter: true,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
makeExpression = () => {
|
||||
const filter = combiningFilter(this.props);
|
||||
this.props.onChange(migrateFilter(filter));
|
||||
this.setState({
|
||||
displaySimpleFilter: false,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(props: Readonly<FilterEditorInternalProps>, state: FilterEditorState) {
|
||||
const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
|
||||
@@ -170,7 +170,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
else if (displaySimpleFilter && state.displaySimpleFilter === false) {
|
||||
return {
|
||||
valueIsSimpleFilter: true,
|
||||
}
|
||||
};
|
||||
}
|
||||
else {
|
||||
return {
|
||||
@@ -203,7 +203,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
</svg>
|
||||
{t("Upgrade to expression")}
|
||||
</InputButton>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
else if (displaySimpleFilter) {
|
||||
const filter = combiningFilter(this.props);
|
||||
@@ -241,7 +241,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
@@ -280,7 +280,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
<div
|
||||
key="doc"
|
||||
className="maputnik-doc-inline"
|
||||
style={{display: this.state.showDoc ? '' : 'none'}}
|
||||
style={{display: this.state.showDoc ? "" : "none"}}
|
||||
>
|
||||
<Doc fieldSpec={fieldSpec} />
|
||||
</div>
|
||||
@@ -306,7 +306,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
{this.state.valueIsSimpleFilter &&
|
||||
<div className="maputnik-expr-infobox">
|
||||
{t("You've entered an old style filter.")}
|
||||
{' '}
|
||||
{" "}
|
||||
<button
|
||||
onClick={this.makeFilter}
|
||||
className="maputnik-expr-infobox__button"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { PropsWithChildren } from 'react'
|
||||
import InputButton from './InputButton'
|
||||
import {MdDelete} from 'react-icons/md'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React, { type PropsWithChildren } from "react";
|
||||
import InputButton from "./InputButton";
|
||||
import {MdDelete} from "react-icons/md";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FilterEditorBlockInternalProps = PropsWithChildren & {
|
||||
onDelete(...args: unknown[]): unknown
|
||||
@@ -23,7 +23,7 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
|
||||
<MdDelete />
|
||||
</InputButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import type {CSSProperties} from 'react'
|
||||
import { BsDiamond, BsDiamondFill, BsFonts, BsSun } from 'react-icons/bs'
|
||||
import { MdBubbleChart, MdOutlineCircle, MdPriorityHigh } from 'react-icons/md'
|
||||
import { IoAnalyticsOutline } from 'react-icons/io5'
|
||||
import type {CSSProperties} from "react";
|
||||
import { BsDiamond, BsDiamondFill, BsFonts, BsSun } from "react-icons/bs";
|
||||
import { MdBubbleChart, MdOutlineCircle, MdPriorityHigh } from "react-icons/md";
|
||||
import { IoAnalyticsOutline } from "react-icons/io5";
|
||||
|
||||
type IconLayerProps = {
|
||||
type: string
|
||||
@@ -12,20 +12,20 @@ type IconLayerProps = {
|
||||
};
|
||||
|
||||
const IconLayer: React.FC<IconLayerProps> = (props) => {
|
||||
const iconProps = { style: props.style }
|
||||
const iconProps = { style: props.style };
|
||||
switch(props.type) {
|
||||
case 'fill-extrusion': return <BsDiamondFill {...iconProps} />
|
||||
case 'raster': return <BsDiamond {...iconProps} />
|
||||
case 'hillshade': return <BsSun {...iconProps} />
|
||||
case 'color-relief': return <MdBubbleChart {...iconProps} />
|
||||
case 'heatmap': return <BsDiamond {...iconProps} />
|
||||
case 'fill': return <BsDiamond {...iconProps} />
|
||||
case 'background': return <BsDiamondFill {...iconProps} />
|
||||
case 'line': return <IoAnalyticsOutline {...iconProps} />
|
||||
case 'symbol': return <BsFonts {...iconProps} />
|
||||
case 'circle': return <MdOutlineCircle {...iconProps} />
|
||||
default: return <MdPriorityHigh {...iconProps} />
|
||||
case "fill-extrusion": return <BsDiamondFill {...iconProps} />;
|
||||
case "raster": return <BsDiamond {...iconProps} />;
|
||||
case "hillshade": return <BsSun {...iconProps} />;
|
||||
case "color-relief": return <MdBubbleChart {...iconProps} />;
|
||||
case "heatmap": return <BsDiamond {...iconProps} />;
|
||||
case "fill": return <BsDiamond {...iconProps} />;
|
||||
case "background": return <BsDiamondFill {...iconProps} />;
|
||||
case "line": return <IoAnalyticsOutline {...iconProps} />;
|
||||
case "symbol": return <BsFonts {...iconProps} />;
|
||||
case "circle": return <MdOutlineCircle {...iconProps} />;
|
||||
default: return <MdPriorityHigh {...iconProps} />;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default IconLayer;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import InputString from './InputString'
|
||||
import InputNumber from './InputNumber'
|
||||
import React from "react";
|
||||
import InputString from "./InputString";
|
||||
import InputNumber from "./InputNumber";
|
||||
|
||||
export type InputArrayProps = {
|
||||
value: (string | number | undefined)[]
|
||||
@@ -8,20 +8,20 @@ export type InputArrayProps = {
|
||||
length?: number
|
||||
default?: (string | number | undefined)[]
|
||||
onChange?(value: (string | number | undefined)[] | undefined): unknown
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
label?: string
|
||||
};
|
||||
|
||||
type InputArrayState = {
|
||||
value: (string | number | undefined)[]
|
||||
initialPropsValue: unknown[]
|
||||
}
|
||||
};
|
||||
|
||||
export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
|
||||
static defaultProps = {
|
||||
value: [],
|
||||
default: [],
|
||||
}
|
||||
};
|
||||
|
||||
constructor (props: InputArrayProps) {
|
||||
super(props);
|
||||
@@ -44,7 +44,7 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
|
||||
value[i] = state.value[i];
|
||||
initialPropsValue[i] = state.value[i];
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return {
|
||||
value,
|
||||
@@ -54,7 +54,7 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
|
||||
|
||||
isComplete(value: unknown[]) {
|
||||
return Array(this.props.length).fill(null).every((_, i) => {
|
||||
const val = value[i]
|
||||
const val = value[i];
|
||||
return !(val === undefined || val === "");
|
||||
});
|
||||
}
|
||||
@@ -82,20 +82,20 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
|
||||
const containsValues = (
|
||||
value.length > 0 &&
|
||||
!value.every(val => {
|
||||
return (val === "" || val === undefined)
|
||||
return (val === "" || val === undefined);
|
||||
})
|
||||
);
|
||||
|
||||
const inputs = Array(this.props.length).fill(null).map((_, i) => {
|
||||
if(this.props.type === 'number') {
|
||||
if(this.props.type === "number") {
|
||||
return <InputNumber
|
||||
key={i}
|
||||
default={containsValues || !this.props.default ? undefined : this.props.default[i] as number}
|
||||
value={value[i] as number}
|
||||
required={containsValues ? true : false}
|
||||
onChange={(v) => this.changeValue(i, v)}
|
||||
aria-label={this.props['aria-label'] || this.props.label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
} else {
|
||||
return <InputString
|
||||
key={i}
|
||||
@@ -103,15 +103,15 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
|
||||
value={value[i] as string}
|
||||
required={containsValues ? true : false}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props['aria-label'] || this.props.label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="maputnik-array">
|
||||
{inputs}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import InputAutocomplete from './InputAutocomplete'
|
||||
import { mount } from 'cypress/react'
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
import { mount } from "cypress/react";
|
||||
|
||||
const fruits = ['apple', 'banana', 'cherry'];
|
||||
const fruits = ["apple", "banana", "cherry"];
|
||||
|
||||
describe('<InputAutocomplete />', () => {
|
||||
it('filters options when typing', () => {
|
||||
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');
|
||||
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,37 +1,37 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import {useCombobox} from 'downshift'
|
||||
import React from "react";
|
||||
import classnames from "classnames";
|
||||
import {useCombobox} from "downshift";
|
||||
|
||||
const MAX_HEIGHT = 140
|
||||
const MAX_HEIGHT = 140;
|
||||
|
||||
export type InputAutocompleteProps = {
|
||||
value?: string
|
||||
options?: any[]
|
||||
onChange?(value: string | undefined): unknown
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
};
|
||||
|
||||
export default function InputAutocomplete({
|
||||
value,
|
||||
options = [],
|
||||
onChange = () => {},
|
||||
'aria-label': ariaLabel,
|
||||
"aria-label": ariaLabel,
|
||||
}: InputAutocompleteProps) {
|
||||
const [input, setInput] = React.useState(value || '')
|
||||
const menuRef = React.useRef<HTMLDivElement>(null)
|
||||
const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT)
|
||||
const [input, setInput] = React.useState(value || "");
|
||||
const menuRef = React.useRef<HTMLDivElement>(null);
|
||||
const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT);
|
||||
|
||||
const filteredItems = React.useMemo(() => {
|
||||
const lv = input.toLowerCase()
|
||||
return options.filter((item) => item[0].toLowerCase().includes(lv))
|
||||
}, [options, input])
|
||||
const lv = input.toLowerCase();
|
||||
return options.filter((item) => item[0].toLowerCase().includes(lv));
|
||||
}, [options, input]);
|
||||
|
||||
const calcMaxHeight = React.useCallback(() => {
|
||||
if (menuRef.current) {
|
||||
const space = window.innerHeight - menuRef.current.getBoundingClientRect().top
|
||||
setMaxHeight(Math.min(space, MAX_HEIGHT))
|
||||
const space = window.innerHeight - menuRef.current.getBoundingClientRect().top;
|
||||
setMaxHeight(Math.min(space, MAX_HEIGHT));
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
const {
|
||||
isOpen,
|
||||
@@ -43,48 +43,48 @@ export default function InputAutocomplete({
|
||||
} = useCombobox({
|
||||
items: filteredItems,
|
||||
inputValue: input,
|
||||
itemToString: (item) => (item ? item[0] : ''),
|
||||
itemToString: (item) => (item ? item[0] : ""),
|
||||
stateReducer: (_state, action) => {
|
||||
if (action.type === useCombobox.stateChangeTypes.InputClick) {
|
||||
return {...action.changes, isOpen: true}
|
||||
return {...action.changes, isOpen: true};
|
||||
}
|
||||
return action.changes
|
||||
return action.changes;
|
||||
},
|
||||
onSelectedItemChange: ({selectedItem}) => {
|
||||
const v = selectedItem ? selectedItem[0] : ''
|
||||
setInput(v)
|
||||
onChange(selectedItem ? selectedItem[0] : undefined)
|
||||
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()
|
||||
if (typeof v === "string") {
|
||||
setInput(v);
|
||||
onChange(v === "" ? undefined : v);
|
||||
openMenu();
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
calcMaxHeight()
|
||||
calcMaxHeight();
|
||||
}
|
||||
}, [isOpen, calcMaxHeight])
|
||||
}, [isOpen, calcMaxHeight]);
|
||||
|
||||
React.useEffect(() => {
|
||||
window.addEventListener('resize', calcMaxHeight)
|
||||
return () => window.removeEventListener('resize', calcMaxHeight)
|
||||
}, [calcMaxHeight])
|
||||
window.addEventListener("resize", calcMaxHeight);
|
||||
return () => window.removeEventListener("resize", calcMaxHeight);
|
||||
}, [calcMaxHeight]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setInput(value || '')
|
||||
}, [value])
|
||||
setInput(value || "");
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<div className="maputnik-autocomplete">
|
||||
<input
|
||||
{...getInputProps({
|
||||
'aria-label': ariaLabel,
|
||||
className: 'maputnik-string',
|
||||
"aria-label": ariaLabel,
|
||||
className: "maputnik-string",
|
||||
spellCheck: false,
|
||||
onFocus: () => openMenu(),
|
||||
})}
|
||||
@@ -92,7 +92,7 @@ export default function InputAutocomplete({
|
||||
<div
|
||||
{...getMenuProps({}, {suppressRefError: true})}
|
||||
ref={menuRef}
|
||||
style={{position: 'fixed', overflow: 'auto', maxHeight, zIndex: 998}}
|
||||
style={{position: "fixed", overflow: "auto", maxHeight, zIndex: 998}}
|
||||
className="maputnik-autocomplete-menu"
|
||||
>
|
||||
{isOpen &&
|
||||
@@ -102,8 +102,8 @@ export default function InputAutocomplete({
|
||||
{...getItemProps({
|
||||
item,
|
||||
index,
|
||||
className: classnames('maputnik-autocomplete-menu-item', {
|
||||
'maputnik-autocomplete-menu-item-selected': highlightedIndex === index,
|
||||
className: classnames("maputnik-autocomplete-menu-item", {
|
||||
"maputnik-autocomplete-menu-item-selected": highlightedIndex === index,
|
||||
}),
|
||||
})}
|
||||
>
|
||||
@@ -112,5 +112,5 @@ export default function InputAutocomplete({
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import React from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
type InputButtonProps = {
|
||||
"data-wd-key"?: string
|
||||
@@ -28,6 +28,6 @@ export default class InputButton extends React.Component<InputButtonProps> {
|
||||
style={this.props.style}
|
||||
>
|
||||
{this.props.children}
|
||||
</button>
|
||||
</button>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
export type InputCheckboxProps = {
|
||||
value?: boolean
|
||||
@@ -9,11 +9,11 @@ export type InputCheckboxProps = {
|
||||
export default class InputCheckbox extends React.Component<InputCheckboxProps> {
|
||||
static defaultProps = {
|
||||
value: false,
|
||||
}
|
||||
};
|
||||
|
||||
onChange = () => {
|
||||
this.props.onChange(!this.props.value);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return <div className="maputnik-checkbox-wrapper">
|
||||
@@ -27,11 +27,11 @@ export default class InputCheckbox extends React.Component<InputCheckboxProps> {
|
||||
/>
|
||||
<div className="maputnik-checkbox-box">
|
||||
<svg style={{
|
||||
display: this.props.value ? 'inline' : 'none'
|
||||
display: this.props.value ? "inline" : "none"
|
||||
}} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
|
||||
<path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React from 'react'
|
||||
import Color from 'color'
|
||||
import ChromePicker from 'react-color/lib/components/chrome/Chrome'
|
||||
import {ColorResult} from 'react-color';
|
||||
import lodash from 'lodash';
|
||||
import React from "react";
|
||||
import Color from "color";
|
||||
import ChromePicker from "react-color/lib/components/chrome/Chrome";
|
||||
import {type ColorResult} from "react-color";
|
||||
import lodash from "lodash";
|
||||
|
||||
function formatColor(color: ColorResult): string {
|
||||
const rgb = color.rgb
|
||||
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
|
||||
const rgb = color.rgb;
|
||||
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
|
||||
}
|
||||
|
||||
export type InputColorProps = {
|
||||
@@ -16,14 +16,14 @@ export type InputColorProps = {
|
||||
doc?: string
|
||||
style?: object
|
||||
default?: string
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
};
|
||||
|
||||
/*** Number fields with support for min, max and units and documentation*/
|
||||
export default class InputColor extends React.Component<InputColorProps> {
|
||||
state = {
|
||||
pickerOpened: false
|
||||
}
|
||||
};
|
||||
colorInput: HTMLInputElement | null = null;
|
||||
|
||||
constructor (props: InputColorProps) {
|
||||
@@ -39,29 +39,29 @@ export default class InputColor extends React.Component<InputColorProps> {
|
||||
//but I am too stupid to get it to work together with fixed position
|
||||
//and scrollbars so I have to fallback to JavaScript
|
||||
calcPickerOffset = () => {
|
||||
const elem = this.colorInput
|
||||
const elem = this.colorInput;
|
||||
if(elem) {
|
||||
const pos = elem.getBoundingClientRect()
|
||||
const pos = elem.getBoundingClientRect();
|
||||
return {
|
||||
top: pos.top,
|
||||
left: pos.left + 196,
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
top: 160,
|
||||
left: 555,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
togglePicker = () => {
|
||||
this.setState({ pickerOpened: !this.state.pickerOpened })
|
||||
}
|
||||
this.setState({ pickerOpened: !this.state.pickerOpened });
|
||||
};
|
||||
|
||||
get color() {
|
||||
// Catch invalid color.
|
||||
try {
|
||||
return Color(this.props.value).rgb()
|
||||
return Color(this.props.value).rgb();
|
||||
}
|
||||
catch(err) {
|
||||
console.warn("Error parsing color: ", err);
|
||||
@@ -74,7 +74,7 @@ export default class InputColor extends React.Component<InputColorProps> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const offset = this.calcPickerOffset()
|
||||
const offset = this.calcPickerOffset();
|
||||
const currentColor = this.color.object();
|
||||
const currentChromeColor = {
|
||||
r: currentColor.r,
|
||||
@@ -82,12 +82,12 @@ export default class InputColor extends React.Component<InputColorProps> {
|
||||
b: currentColor.b,
|
||||
// Rename alpha -> a for ChromePicker
|
||||
a: currentColor.alpha!
|
||||
}
|
||||
};
|
||||
|
||||
const picker = <div
|
||||
className="maputnik-color-picker-offset"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
position: "fixed",
|
||||
zIndex: 1,
|
||||
left: offset.left,
|
||||
top: offset.top,
|
||||
@@ -101,14 +101,14 @@ export default class InputColor extends React.Component<InputColorProps> {
|
||||
onClick={this.togglePicker}
|
||||
style={{
|
||||
zIndex: -1,
|
||||
position: 'fixed',
|
||||
top: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
left: '0px',
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
right: "0px",
|
||||
bottom: "0px",
|
||||
left: "0px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
const swatchStyle = {
|
||||
backgroundColor: this.props.value
|
||||
@@ -118,11 +118,11 @@ export default class InputColor extends React.Component<InputColorProps> {
|
||||
{this.state.pickerOpened && picker}
|
||||
<div className="maputnik-color-swatch" style={swatchStyle}></div>
|
||||
<input
|
||||
aria-label={this.props['aria-label']}
|
||||
aria-label={this.props["aria-label"]}
|
||||
spellCheck="false"
|
||||
autoComplete="off"
|
||||
className="maputnik-color"
|
||||
ref={(input) => {this.colorInput = input}}
|
||||
ref={(input) => {this.colorInput = input;}}
|
||||
onClick={this.togglePicker}
|
||||
style={this.props.style}
|
||||
name={this.props.name}
|
||||
@@ -130,6 +130,6 @@ export default class InputColor extends React.Component<InputColorProps> {
|
||||
value={this.props.value ? this.props.value : ""}
|
||||
onChange={(e) => this.onChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
import React from 'react'
|
||||
import capitalize from 'lodash.capitalize'
|
||||
import {MdDelete} from 'react-icons/md'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import capitalize from "lodash.capitalize";
|
||||
import {MdDelete} from "react-icons/md";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import InputString from './InputString'
|
||||
import InputNumber from './InputNumber'
|
||||
import InputButton from './InputButton'
|
||||
import FieldDocLabel from './FieldDocLabel'
|
||||
import InputEnum from './InputEnum'
|
||||
import InputUrl from './InputUrl'
|
||||
import InputColor from './InputColor';
|
||||
import InputString from "./InputString";
|
||||
import InputNumber from "./InputNumber";
|
||||
import InputButton from "./InputButton";
|
||||
import FieldDocLabel from "./FieldDocLabel";
|
||||
import InputEnum from "./InputEnum";
|
||||
import InputUrl from "./InputUrl";
|
||||
import InputColor from "./InputColor";
|
||||
|
||||
|
||||
export type InputDynamicArrayProps = {
|
||||
value?: (string | number | undefined)[]
|
||||
type?: 'url' | 'number' | 'enum' | 'string' | 'color'
|
||||
type?: "url" | "number" | "enum" | "string" | "color"
|
||||
default?: (string | number | undefined)[]
|
||||
onChange?(values: (string | number | undefined)[] | undefined): unknown
|
||||
style?: object
|
||||
fieldSpec?: {
|
||||
values?: any
|
||||
}
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
label: string
|
||||
}
|
||||
};
|
||||
|
||||
type InputDynamicArrayInternalProps = InputDynamicArrayProps & WithTranslation;
|
||||
|
||||
class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInternalProps> {
|
||||
changeValue(idx: number, newValue: string | number | undefined) {
|
||||
const values = this.values.slice(0)
|
||||
values[idx] = newValue
|
||||
if (this.props.onChange) this.props.onChange(values)
|
||||
const values = this.values.slice(0);
|
||||
values[idx] = newValue;
|
||||
if (this.props.onChange) this.props.onChange(values);
|
||||
}
|
||||
|
||||
get values() {
|
||||
return this.props.value || this.props.default || []
|
||||
return this.props.value || this.props.default || [];
|
||||
}
|
||||
|
||||
addValue = () => {
|
||||
const values = this.values.slice(0)
|
||||
if (this.props.type === 'number') {
|
||||
values.push(0)
|
||||
const values = this.values.slice(0);
|
||||
if (this.props.type === "number") {
|
||||
values.push(0);
|
||||
}
|
||||
else if (this.props.type === 'url') {
|
||||
else if (this.props.type === "url") {
|
||||
values.push("");
|
||||
}
|
||||
else if (this.props.type === 'enum') {
|
||||
else if (this.props.type === "enum") {
|
||||
const {fieldSpec} = this.props;
|
||||
const defaultValue = Object.keys(fieldSpec!.values)[0];
|
||||
values.push(defaultValue);
|
||||
} else if (this.props.type === 'color') {
|
||||
} else if (this.props.type === "color") {
|
||||
values.push("#000000");
|
||||
} else {
|
||||
values.push("")
|
||||
values.push("");
|
||||
}
|
||||
|
||||
if (this.props.onChange) this.props.onChange(values)
|
||||
}
|
||||
if (this.props.onChange) this.props.onChange(values);
|
||||
};
|
||||
|
||||
deleteValue(valueIdx: number) {
|
||||
const values = this.values.slice(0)
|
||||
values.splice(valueIdx, 1)
|
||||
const values = this.values.slice(0);
|
||||
values.splice(valueIdx, 1);
|
||||
|
||||
if (this.props.onChange) this.props.onChange(values.length > 0 ? values : undefined);
|
||||
}
|
||||
@@ -75,42 +75,42 @@ class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInterna
|
||||
{...i18nProps}
|
||||
/>;
|
||||
let input;
|
||||
if(this.props.type === 'url') {
|
||||
if(this.props.type === "url") {
|
||||
input = <InputUrl
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props['aria-label'] || this.props.label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else if (this.props.type === 'number') {
|
||||
else if (this.props.type === "number") {
|
||||
input = <InputNumber
|
||||
value={v as number}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props['aria-label'] || this.props.label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else if (this.props.type === 'enum') {
|
||||
else if (this.props.type === "enum") {
|
||||
const options = Object.keys(this.props.fieldSpec?.values).map(v => [v, capitalize(v)]);
|
||||
input = <InputEnum
|
||||
options={options}
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props['aria-label'] || this.props.label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else if (this.props.type === 'color') {
|
||||
else if (this.props.type === "color") {
|
||||
input = <InputColor
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props['aria-label'] || this.props.label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
else {
|
||||
input = <InputString
|
||||
value={v as string}
|
||||
onChange={this.changeValue.bind(this, i)}
|
||||
aria-label={this.props['aria-label'] || this.props.label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || this.props.label}
|
||||
/>;
|
||||
}
|
||||
|
||||
return <div
|
||||
@@ -124,8 +124,8 @@ class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInterna
|
||||
<div className="maputnik-array-block-content">
|
||||
{input}
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
</div>;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="maputnik-array">
|
||||
@@ -159,6 +159,6 @@ class DeleteValueInputButton extends React.Component<DeleteValueInputButtonProps
|
||||
<FieldDocLabel
|
||||
label={<MdDelete />}
|
||||
/>
|
||||
</InputButton>
|
||||
</InputButton>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import InputSelect from './InputSelect'
|
||||
import InputMultiInput from './InputMultiInput'
|
||||
import React from "react";
|
||||
import InputSelect from "./InputSelect";
|
||||
import InputMultiInput from "./InputMultiInput";
|
||||
|
||||
|
||||
function optionsLabelLength(options: any[]) {
|
||||
let sum = 0;
|
||||
options.forEach(([_, label]) => {
|
||||
sum += label.length
|
||||
})
|
||||
return sum
|
||||
sum += label.length;
|
||||
});
|
||||
return sum;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ export type InputEnumProps = {
|
||||
name?: string
|
||||
onChange(...args: unknown[]): unknown
|
||||
options: any[]
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
label?: string
|
||||
};
|
||||
|
||||
@@ -35,15 +35,15 @@ export default class InputEnum extends React.Component<InputEnumProps> {
|
||||
options={options}
|
||||
value={(value || this.props.default)!}
|
||||
onChange={onChange}
|
||||
aria-label={this.props['aria-label'] || label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || label}
|
||||
/>;
|
||||
} else {
|
||||
return <InputSelect
|
||||
options={options}
|
||||
value={(value || this.props.default)!}
|
||||
onChange={onChange}
|
||||
aria-label={this.props['aria-label'] || label}
|
||||
/>
|
||||
aria-label={this.props["aria-label"] || label}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import InputAutocomplete from './InputAutocomplete'
|
||||
import React from "react";
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
|
||||
export type InputFontProps = {
|
||||
name: string
|
||||
@@ -8,13 +8,13 @@ export type InputFontProps = {
|
||||
fonts?: unknown[]
|
||||
style?: object
|
||||
onChange(...args: unknown[]): unknown
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
};
|
||||
|
||||
export default class InputFont extends React.Component<InputFontProps> {
|
||||
static defaultProps = {
|
||||
fonts: []
|
||||
}
|
||||
};
|
||||
|
||||
get values() {
|
||||
const out = this.props.value || this.props.default || [];
|
||||
@@ -29,11 +29,11 @@ export default class InputFont extends React.Component<InputFontProps> {
|
||||
}
|
||||
|
||||
changeFont(idx: number, newValue: string) {
|
||||
const changedValues = this.values.slice(0)
|
||||
changedValues[idx] = newValue
|
||||
const changedValues = this.values.slice(0);
|
||||
changedValues[idx] = newValue;
|
||||
const filteredValues = changedValues
|
||||
.filter(v => v !== undefined)
|
||||
.filter(v => v !== "")
|
||||
.filter(v => v !== "");
|
||||
|
||||
this.props.onChange(filteredValues);
|
||||
}
|
||||
@@ -44,13 +44,13 @@ export default class InputFont extends React.Component<InputFontProps> {
|
||||
key={i}
|
||||
>
|
||||
<InputAutocomplete
|
||||
aria-label={this.props['aria-label'] || this.props.name}
|
||||
aria-label={this.props["aria-label"] || this.props.name}
|
||||
value={value}
|
||||
options={this.props.fonts?.map(f => [f, f])}
|
||||
onChange={this.changeFont.bind(this, i)}
|
||||
/>
|
||||
</li>
|
||||
})
|
||||
</li>;
|
||||
});
|
||||
|
||||
return (
|
||||
<ul className="maputnik-font">
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames';
|
||||
import CodeMirror, { ModeSpec } from 'codemirror';
|
||||
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import classnames from "classnames";
|
||||
import CodeMirror, { type ModeSpec } from "codemirror";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import 'codemirror/mode/javascript/javascript'
|
||||
import 'codemirror/addon/lint/lint'
|
||||
import 'codemirror/addon/edit/matchbrackets'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/addon/lint/lint.css'
|
||||
import stringifyPretty from 'json-stringify-pretty-compact'
|
||||
import '../libs/codemirror-mgl';
|
||||
import type { LayerSpecification } from 'maplibre-gl';
|
||||
import "codemirror/mode/javascript/javascript";
|
||||
import "codemirror/addon/lint/lint";
|
||||
import "codemirror/addon/edit/matchbrackets";
|
||||
import "codemirror/lib/codemirror.css";
|
||||
import "codemirror/addon/lint/lint.css";
|
||||
import stringifyPretty from "json-stringify-pretty-compact";
|
||||
import "../libs/codemirror-mgl";
|
||||
import type { LayerSpecification } from "maplibre-gl";
|
||||
|
||||
|
||||
export type InputJsonProps = {
|
||||
@@ -49,7 +49,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
onBlur: () => {},
|
||||
onJSONInvalid: () => {},
|
||||
onJSONValid: () => {},
|
||||
}
|
||||
};
|
||||
_keyEvent: string;
|
||||
_doc: CodeMirror.Editor | undefined;
|
||||
_el: HTMLDivElement | null = null;
|
||||
@@ -73,7 +73,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
},
|
||||
lineWrapping: this.props.lineWrapping,
|
||||
tabSize: 2,
|
||||
theme: 'maputnik',
|
||||
theme: "maputnik",
|
||||
viewportMargin: Infinity,
|
||||
lineNumbers: this.props.lineNumbers,
|
||||
lint: this.props.lint || {
|
||||
@@ -84,14 +84,14 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
scrollbarStyle: "null",
|
||||
});
|
||||
|
||||
this._doc.on('change', this.onChange);
|
||||
this._doc.on('focus', this.onFocus);
|
||||
this._doc.on('blur', this.onBlur);
|
||||
this._doc.on("change", this.onChange);
|
||||
this._doc.on("focus", this.onFocus);
|
||||
this._doc.on("blur", this.onBlur);
|
||||
}
|
||||
|
||||
onPointerDown = () => {
|
||||
this._keyEvent = "pointer";
|
||||
}
|
||||
};
|
||||
|
||||
onFocus = () => {
|
||||
if (this.props.onFocus) this.props.onFocus();
|
||||
@@ -99,7 +99,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
isEditing: true,
|
||||
showMessage: (this._keyEvent === "keyboard"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onBlur = () => {
|
||||
this._keyEvent = "keyboard";
|
||||
@@ -108,12 +108,12 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
isEditing: false,
|
||||
showMessage: false,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
componentWillUnMount () {
|
||||
this._doc!.off('change', this.onChange);
|
||||
this._doc!.off('focus', this.onFocus);
|
||||
this._doc!.off('blur', this.onBlur);
|
||||
this._doc!.off("change", this.onChange);
|
||||
this._doc!.off("focus", this.onFocus);
|
||||
this._doc!.off("blur", this.onBlur);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: InputJsonProps) {
|
||||
@@ -121,7 +121,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
this._cancelNextChange = true;
|
||||
this._doc!.setValue(
|
||||
this.props.getValue!(this.props.layer),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,7 +130,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
this._cancelNextChange = false;
|
||||
this.setState({
|
||||
prevValue: this._doc!.getValue(),
|
||||
})
|
||||
});
|
||||
return;
|
||||
}
|
||||
const newCode = this._doc!.getValue();
|
||||
@@ -141,14 +141,14 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
parsedLayer = JSON.parse(newCode);
|
||||
} catch(_err) {
|
||||
err = _err;
|
||||
console.warn(_err)
|
||||
console.warn(_err);
|
||||
}
|
||||
|
||||
if (err && this.props.onJSONInvalid) {
|
||||
this.props.onJSONInvalid();
|
||||
}
|
||||
else {
|
||||
if (this.props.onChange) this.props.onChange(parsedLayer)
|
||||
if (this.props.onChange) this.props.onChange(parsedLayer);
|
||||
if (this.props.onJSONValid) this.props.onJSONValid();
|
||||
}
|
||||
}
|
||||
@@ -156,7 +156,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
this.setState({
|
||||
prevValue: newCode,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
@@ -174,10 +174,10 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
</div>
|
||||
<div
|
||||
className={classnames("codemirror-container", this.props.className)}
|
||||
ref={(el) => {this._el = el}}
|
||||
ref={(el) => {this._el = el;}}
|
||||
style={style}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import React from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
export type InputMultiInputProps = {
|
||||
name?: string
|
||||
value: string
|
||||
options: any[]
|
||||
onChange(...args: unknown[]): unknown
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
};
|
||||
|
||||
export default class InputMultiInput extends React.Component<InputMultiInputProps> {
|
||||
render() {
|
||||
let options = this.props.options
|
||||
let options = this.props.options;
|
||||
if(options.length > 0 && !Array.isArray(options[0])) {
|
||||
options = options.map(v => [v, v])
|
||||
options = options.map(v => [v, v]);
|
||||
}
|
||||
|
||||
const selectedValue = this.props.value || options[0][0]
|
||||
const selectedValue = this.props.value || options[0][0];
|
||||
const radios = options.map(([val, label])=> {
|
||||
return <label
|
||||
key={val}
|
||||
@@ -29,11 +29,11 @@ export default class InputMultiInput extends React.Component<InputMultiInputProp
|
||||
checked={val === selectedValue}
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
})
|
||||
</label>;
|
||||
});
|
||||
|
||||
return <fieldset className="maputnik-multibutton" aria-label={this.props['aria-label']}>
|
||||
return <fieldset className="maputnik-multibutton" aria-label={this.props["aria-label"]}>
|
||||
{radios}
|
||||
</fieldset>
|
||||
</fieldset>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { BaseSyntheticEvent } from 'react'
|
||||
import generateUniqueId from '../libs/document-uid';
|
||||
import React, { type BaseSyntheticEvent } from "react";
|
||||
import generateUniqueId from "../libs/document-uid";
|
||||
|
||||
export type InputNumberProps = {
|
||||
value?: number
|
||||
@@ -23,22 +23,22 @@ type InputNumberState = {
|
||||
* This is the value that is currently being edited. It can be an invalid value.
|
||||
*/
|
||||
dirtyValue?: number | string | undefined
|
||||
}
|
||||
};
|
||||
|
||||
export default class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
|
||||
static defaultProps = {
|
||||
rangeStep: 1
|
||||
}
|
||||
};
|
||||
_keyboardEvent: boolean = false;
|
||||
|
||||
constructor(props: InputNumberProps) {
|
||||
super(props)
|
||||
super(props);
|
||||
this.state = {
|
||||
uuid: +generateUniqueId(),
|
||||
editing: false,
|
||||
value: props.value,
|
||||
dirtyValue: props.value,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: Readonly<InputNumberProps>, state: InputNumberState) {
|
||||
@@ -57,7 +57,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
|
||||
const hasChanged = this.props.value !== value;
|
||||
if(this.isValid(value) && hasChanged) {
|
||||
if (this.props.onChange) this.props.onChange(value)
|
||||
if (this.props.onChange) this.props.onChange(value);
|
||||
this.setState({
|
||||
value: value,
|
||||
});
|
||||
@@ -70,7 +70,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
|
||||
this.setState({
|
||||
dirtyValue: newValue === "" ? undefined : newValue,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
isValid(v: number | string | undefined) {
|
||||
@@ -80,18 +80,18 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
|
||||
const value = +v;
|
||||
if(isNaN(value)) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!isNaN(this.props.min!) && value < this.props.min!) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!isNaN(this.props.max!) && value > this.props.max!) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
|
||||
return true
|
||||
return true;
|
||||
}
|
||||
|
||||
resetValue = () => {
|
||||
@@ -104,14 +104,14 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
// If set value is invalid fall back to the last valid value from props or at last resort the default value
|
||||
if (!this.isValid(this.state.value)) {
|
||||
if(this.isValid(this.props.value)) {
|
||||
this.changeValue(this.props.value)
|
||||
this.changeValue(this.props.value);
|
||||
this.setState({dirtyValue: this.props.value});
|
||||
} else {
|
||||
this.changeValue(undefined);
|
||||
this.setState({dirtyValue: undefined});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onChangeRange = (e: BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
|
||||
let value = parseFloat(e.target.value);
|
||||
@@ -132,7 +132,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
value = this.state.value! - step;
|
||||
}
|
||||
else {
|
||||
value = this.state.value! + step
|
||||
value = this.state.value! + step;
|
||||
}
|
||||
dirtyValue = value;
|
||||
}
|
||||
@@ -153,7 +153,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
|
||||
this.setState({value, dirtyValue});
|
||||
if (this.props.onChange) this.props.onChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
if(
|
||||
@@ -217,18 +217,18 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
}}
|
||||
onBlur={_e => {
|
||||
this.setState({editing: false});
|
||||
this.resetValue()
|
||||
this.resetValue();
|
||||
}}
|
||||
data-wd-key={this.props["data-wd-key"] + "-text"}
|
||||
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
else {
|
||||
const value = this.state.editing ? this.state.dirtyValue : this.state.value;
|
||||
|
||||
return <input
|
||||
aria-label={this.props['aria-label']}
|
||||
aria-label={this.props["aria-label"]}
|
||||
spellCheck="false"
|
||||
className="maputnik-number"
|
||||
placeholder={this.props.default?.toString()}
|
||||
@@ -240,7 +240,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
|
||||
onBlur={this.resetValue}
|
||||
required={this.props.required}
|
||||
data-wd-key={this.props["data-wd-key"]}
|
||||
/>
|
||||
/>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
export type InputSelectProps = {
|
||||
value: string
|
||||
@@ -7,7 +7,7 @@ export type InputSelectProps = {
|
||||
style?: object
|
||||
onChange(value: string | [string, any]): unknown
|
||||
title?: string
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
};
|
||||
|
||||
export default class InputSelect extends React.Component<InputSelectProps> {
|
||||
@@ -24,9 +24,9 @@ export default class InputSelect extends React.Component<InputSelectProps> {
|
||||
title={this.props.title}
|
||||
value={this.props.value}
|
||||
onChange={e => this.props.onChange(e.target.value)}
|
||||
aria-label={this.props['aria-label']}
|
||||
aria-label={this.props["aria-label"]}
|
||||
>
|
||||
{ options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
|
||||
</select>
|
||||
</select>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import React, { type ReactElement } from "react";
|
||||
|
||||
import InputColor, { InputColorProps } from './InputColor'
|
||||
import InputNumber, { InputNumberProps } from './InputNumber'
|
||||
import InputCheckbox, { InputCheckboxProps } from './InputCheckbox'
|
||||
import InputString, { InputStringProps } from './InputString'
|
||||
import InputArray, { InputArrayProps } from './InputArray'
|
||||
import InputDynamicArray, { InputDynamicArrayProps } from './InputDynamicArray'
|
||||
import InputFont, { InputFontProps } from './InputFont'
|
||||
import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
|
||||
import InputEnum, { InputEnumProps } from './InputEnum'
|
||||
import capitalize from 'lodash.capitalize'
|
||||
import InputColor, { type InputColorProps } from "./InputColor";
|
||||
import InputNumber, { type InputNumberProps } from "./InputNumber";
|
||||
import InputCheckbox, { type InputCheckboxProps } from "./InputCheckbox";
|
||||
import InputString, { type InputStringProps } from "./InputString";
|
||||
import InputArray, { type InputArrayProps } from "./InputArray";
|
||||
import InputDynamicArray, { type InputDynamicArrayProps } from "./InputDynamicArray";
|
||||
import InputFont, { type InputFontProps } from "./InputFont";
|
||||
import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
|
||||
import InputEnum, { type InputEnumProps } from "./InputEnum";
|
||||
import capitalize from "lodash.capitalize";
|
||||
|
||||
const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
|
||||
const iconProperties = ["background-pattern", "fill-pattern", "line-pattern", "fill-extrusion-pattern", "icon-image"];
|
||||
|
||||
export type FieldSpecType = 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array' | 'numberArray' | 'padding' | 'colorArray' | 'variableAnchorOffsetCollection';
|
||||
export type FieldSpecType = "number" | "enum" | "resolvedImage" | "formatted" | "string" | "color" | "boolean" | "array" | "numberArray" | "padding" | "colorArray" | "variableAnchorOffsetCollection";
|
||||
|
||||
export type InputSpecProps = {
|
||||
onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
|
||||
@@ -30,7 +30,7 @@ export type InputSpecProps = {
|
||||
value?: string | number | unknown[] | boolean
|
||||
/** Override the style of the field */
|
||||
style?: object
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
error?: unknown[]
|
||||
label?: string
|
||||
action?: ReactElement
|
||||
@@ -53,96 +53,96 @@ export default class InputSpec extends React.Component<InputSpecProps> {
|
||||
name: this.props.fieldName,
|
||||
"data-wd-key": "spec-field-input:" + this.props.fieldName,
|
||||
onChange: (newValue: number | undefined | (string | number | undefined)[]) => this.props.onChange!(this.props.fieldName, newValue),
|
||||
'aria-label': this.props['aria-label'],
|
||||
}
|
||||
"aria-label": this.props["aria-label"],
|
||||
};
|
||||
switch(this.props.fieldSpec?.type) {
|
||||
case 'number': return (
|
||||
case "number": return (
|
||||
<InputNumber
|
||||
{...commonProps as InputNumberProps}
|
||||
min={this.props.fieldSpec.minimum}
|
||||
max={this.props.fieldSpec.maximum}
|
||||
/>
|
||||
)
|
||||
case 'enum': {
|
||||
const options = Object.keys(this.props.fieldSpec.values || []).map(v => [v, capitalize(v)])
|
||||
);
|
||||
case "enum": {
|
||||
const options = Object.keys(this.props.fieldSpec.values || []).map(v => [v, capitalize(v)]);
|
||||
|
||||
return <InputEnum
|
||||
{...commonProps as Omit<InputEnumProps, "options">}
|
||||
options={options}
|
||||
/>
|
||||
/>;
|
||||
}
|
||||
case 'resolvedImage':
|
||||
case 'formatted':
|
||||
case 'string':
|
||||
case "resolvedImage":
|
||||
case "formatted":
|
||||
case "string":
|
||||
if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
|
||||
const options = this.props.fieldSpec.values || [];
|
||||
return <InputAutocomplete
|
||||
{...commonProps as Omit<InputAutocompleteProps, "options">}
|
||||
options={options.map(f => [f, f])}
|
||||
/>
|
||||
/>;
|
||||
} else {
|
||||
return <InputString
|
||||
{...commonProps as InputStringProps}
|
||||
/>
|
||||
/>;
|
||||
}
|
||||
case 'color': return (
|
||||
case "color": return (
|
||||
<InputColor
|
||||
{...commonProps as InputColorProps}
|
||||
/>
|
||||
)
|
||||
case 'boolean': return (
|
||||
);
|
||||
case "boolean": return (
|
||||
<InputCheckbox
|
||||
{...commonProps as InputCheckboxProps}
|
||||
/>
|
||||
)
|
||||
case 'array':
|
||||
if(this.props.fieldName === 'text-font') {
|
||||
);
|
||||
case "array":
|
||||
if(this.props.fieldName === "text-font") {
|
||||
return <InputFont
|
||||
{...commonProps as InputFontProps}
|
||||
fonts={this.props.fieldSpec.values}
|
||||
/>
|
||||
/>;
|
||||
} else {
|
||||
if (this.props.fieldSpec.length) {
|
||||
return <InputArray
|
||||
{...commonProps as InputArrayProps}
|
||||
type={this.props.fieldSpec.value}
|
||||
length={this.props.fieldSpec.length}
|
||||
/>
|
||||
/>;
|
||||
} else {
|
||||
return <InputDynamicArray
|
||||
{...commonProps as InputDynamicArrayProps}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
type={this.props.fieldSpec.value as InputDynamicArrayProps['type']}
|
||||
/>
|
||||
type={this.props.fieldSpec.value as InputDynamicArrayProps["type"]}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
case 'numberArray': return (
|
||||
case "numberArray": return (
|
||||
<InputDynamicArray
|
||||
{...commonProps as InputDynamicArrayProps}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
type="number"
|
||||
value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
|
||||
/>
|
||||
)
|
||||
case 'colorArray': return (
|
||||
);
|
||||
case "colorArray": return (
|
||||
<InputDynamicArray
|
||||
{...commonProps as InputDynamicArrayProps}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
type="color"
|
||||
value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
|
||||
/>
|
||||
)
|
||||
case 'padding': return (
|
||||
);
|
||||
case "padding": return (
|
||||
<InputArray
|
||||
{...commonProps as InputArrayProps}
|
||||
type="number"
|
||||
value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
|
||||
length={4}
|
||||
/>
|
||||
)
|
||||
);
|
||||
default:
|
||||
console.warn(`No proper field input for ${this.props.fieldName} type: ${this.props.fieldSpec?.type}`);
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
export type InputStringProps = {
|
||||
"data-wd-key"?: string
|
||||
@@ -11,26 +11,26 @@ export type InputStringProps = {
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
spellCheck?: boolean
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
title?: string
|
||||
};
|
||||
|
||||
type InputStringState = {
|
||||
editing: boolean
|
||||
value?: string
|
||||
}
|
||||
};
|
||||
|
||||
export default class InputString extends React.Component<InputStringProps, InputStringState> {
|
||||
static defaultProps = {
|
||||
onInput: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props: InputStringProps) {
|
||||
super(props)
|
||||
super(props);
|
||||
this.state = {
|
||||
editing: false,
|
||||
value: props.value || ''
|
||||
}
|
||||
value: props.value || ""
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: Readonly<InputStringProps>, state: InputStringState) {
|
||||
@@ -47,17 +47,17 @@ export default class InputString extends React.Component<InputStringProps, Input
|
||||
let classes;
|
||||
|
||||
if(this.props.multi) {
|
||||
tag = "textarea"
|
||||
tag = "textarea";
|
||||
classes = [
|
||||
"maputnik-string",
|
||||
"maputnik-string--multi"
|
||||
]
|
||||
];
|
||||
}
|
||||
else {
|
||||
tag = "input"
|
||||
tag = "input";
|
||||
classes = [
|
||||
"maputnik-string"
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
if(this.props.disabled) {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { JSX } from 'react'
|
||||
import InputString from './InputString'
|
||||
import SmallError from './SmallError'
|
||||
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { TFunction } from 'i18next';
|
||||
import React, { type JSX } from "react";
|
||||
import InputString from "./InputString";
|
||||
import SmallError from "./SmallError";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { type TFunction } from "i18next";
|
||||
|
||||
function validate(url: string, t: TFunction): JSX.Element | undefined {
|
||||
if (url === "") {
|
||||
@@ -63,7 +63,7 @@ export type FieldUrlProps = {
|
||||
onInput?(...args: unknown[]): unknown
|
||||
multi?: boolean
|
||||
required?: boolean
|
||||
'aria-label'?: string
|
||||
"aria-label"?: string
|
||||
type?: string
|
||||
className?: string
|
||||
};
|
||||
@@ -72,12 +72,12 @@ type InputUrlInternalProps = FieldUrlProps & WithTranslation;
|
||||
|
||||
type InputUrlState = {
|
||||
error?: React.ReactNode
|
||||
}
|
||||
};
|
||||
|
||||
class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlState> {
|
||||
static defaultProps = {
|
||||
onInput: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
constructor (props: InputUrlInternalProps) {
|
||||
super(props);
|
||||
@@ -91,14 +91,14 @@ class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlSt
|
||||
error: validate(url, this.props.t),
|
||||
});
|
||||
if (this.props.onInput) this.props.onInput(url);
|
||||
}
|
||||
};
|
||||
|
||||
onChange = (url: string) => {
|
||||
this.setState({
|
||||
error: validate(url, this.props.t),
|
||||
});
|
||||
this.props.onChange(url);
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
@@ -107,7 +107,7 @@ class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlSt
|
||||
{...this.props}
|
||||
onInput={this.onInput}
|
||||
onChange={this.onChange}
|
||||
aria-label={this.props['aria-label']}
|
||||
aria-label={this.props["aria-label"]}
|
||||
/>
|
||||
{this.state.error}
|
||||
</div>
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
import React, {type JSX} from 'react'
|
||||
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 {v8} from '@maplibre/maplibre-gl-style-spec';
|
||||
import React, {type JSX} from "react";
|
||||
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 {type BackgroundLayerSpecification, type LayerSpecification, type SourceSpecification} from "maplibre-gl";
|
||||
import {v8} from "@maplibre/maplibre-gl-style-spec";
|
||||
|
||||
import FieldJson from './FieldJson'
|
||||
import FilterEditor from './FilterEditor'
|
||||
import PropertyGroup from './PropertyGroup'
|
||||
import LayerEditorGroup from './LayerEditorGroup'
|
||||
import FieldType from './FieldType'
|
||||
import FieldId from './FieldId'
|
||||
import FieldMinZoom from './FieldMinZoom'
|
||||
import FieldMaxZoom from './FieldMaxZoom'
|
||||
import FieldComment from './FieldComment'
|
||||
import FieldSource from './FieldSource'
|
||||
import FieldSourceLayer from './FieldSourceLayer'
|
||||
import { changeType, changeProperty } from '../libs/layer'
|
||||
import {formatLayerId} from '../libs/format';
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { TFunction } from 'i18next';
|
||||
import { NON_SOURCE_LAYERS } from '../libs/non-source-layers';
|
||||
import { OnMoveLayerCallback } from '../libs/definitions';
|
||||
import FieldJson from "./FieldJson";
|
||||
import FilterEditor from "./FilterEditor";
|
||||
import PropertyGroup from "./PropertyGroup";
|
||||
import LayerEditorGroup from "./LayerEditorGroup";
|
||||
import FieldType from "./FieldType";
|
||||
import FieldId from "./FieldId";
|
||||
import FieldMinZoom from "./FieldMinZoom";
|
||||
import FieldMaxZoom from "./FieldMaxZoom";
|
||||
import FieldComment from "./FieldComment";
|
||||
import FieldSource from "./FieldSource";
|
||||
import FieldSourceLayer from "./FieldSourceLayer";
|
||||
import { changeType, changeProperty } from "../libs/layer";
|
||||
import {formatLayerId} from "../libs/format";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { type TFunction } from "i18next";
|
||||
import { NON_SOURCE_LAYERS } from "../libs/non-source-layers";
|
||||
import { type OnMoveLayerCallback } from "../libs/definitions";
|
||||
|
||||
type MaputnikLayoutGroup = {
|
||||
id: string;
|
||||
title: string;
|
||||
type: string;
|
||||
fields: string[];
|
||||
}
|
||||
};
|
||||
|
||||
function getLayoutForSymbolType(t: TFunction): MaputnikLayoutGroup[] {
|
||||
const groups: MaputnikLayoutGroup[] = [];
|
||||
@@ -68,7 +68,7 @@ function getLayoutForSymbolType(t: TFunction): MaputnikLayoutGroup[] {
|
||||
|
||||
function getLayoutForType(type: LayerSpecification["type"], t: TFunction): MaputnikLayoutGroup[] {
|
||||
if (Object.keys(v8.layer.type.values).indexOf(type) < 0) {
|
||||
return []
|
||||
return [];
|
||||
}
|
||||
if (type === "symbol") {
|
||||
return getLayoutForSymbolType(t);
|
||||
@@ -95,23 +95,23 @@ function getLayoutForType(type: LayerSpecification["type"], t: TFunction): Maput
|
||||
|
||||
function layoutGroups(layerType: LayerSpecification["type"], t: TFunction): {id: string, title: string, type: string, fields?: string[]}[] {
|
||||
const layerGroup = {
|
||||
id: 'layer',
|
||||
title: t('Layer'),
|
||||
type: 'layer'
|
||||
}
|
||||
id: "layer",
|
||||
title: t("Layer"),
|
||||
type: "layer"
|
||||
};
|
||||
const filterGroup = {
|
||||
id: 'filter',
|
||||
title: t('Filter'),
|
||||
type: 'filter'
|
||||
}
|
||||
id: "filter",
|
||||
title: t("Filter"),
|
||||
type: "filter"
|
||||
};
|
||||
const editorGroup = {
|
||||
id: 'jsoneditor',
|
||||
title: t('JSON Editor'),
|
||||
type: 'jsoneditor'
|
||||
}
|
||||
id: "jsoneditor",
|
||||
title: t("JSON Editor"),
|
||||
type: "jsoneditor"
|
||||
};
|
||||
return [layerGroup, filterGroup]
|
||||
.concat(getLayoutForType(layerType, t))
|
||||
.concat([editorGroup])
|
||||
.concat([editorGroup]);
|
||||
}
|
||||
|
||||
type LayerEditorInternalProps = {
|
||||
@@ -141,25 +141,25 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
onLayerChanged: () => {},
|
||||
onLayerIdChange: () => {},
|
||||
onLayerDestroyed: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props: LayerEditorInternalProps) {
|
||||
super(props)
|
||||
super(props);
|
||||
|
||||
const editorGroups: {[keys:string]: boolean} = {}
|
||||
const editorGroups: {[keys:string]: boolean} = {};
|
||||
for (const group of layoutGroups(this.props.layer.type, props.t)) {
|
||||
editorGroups[group.title] = true
|
||||
editorGroups[group.title] = true;
|
||||
}
|
||||
|
||||
this.state = { editorGroups }
|
||||
this.state = { editorGroups };
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: Readonly<LayerEditorInternalProps>, state: LayerEditorState) {
|
||||
const additionalGroups = { ...state.editorGroups }
|
||||
const additionalGroups = { ...state.editorGroups };
|
||||
|
||||
for (const group of getLayoutForType(props.layer.type, props.t)) {
|
||||
if(!(group.title in additionalGroups)) {
|
||||
additionalGroups[group.title] = true
|
||||
additionalGroups[group.title] = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,23 +173,23 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
changeProperty(this.props.layer, group, property, newValue)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
onGroupToggle(groupTitle: string, active: boolean) {
|
||||
const changedActiveGroups = {
|
||||
...this.state.editorGroups,
|
||||
[groupTitle]: active,
|
||||
}
|
||||
};
|
||||
this.setState({
|
||||
editorGroups: changedActiveGroups
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
renderGroupType(type: string, fields?: string[]): JSX.Element {
|
||||
let comment = ""
|
||||
let comment = "";
|
||||
if(this.props.layer.metadata) {
|
||||
comment = (this.props.layer.metadata as any)['maputnik:comment']
|
||||
comment = (this.props.layer.metadata as any)["maputnik:comment"];
|
||||
}
|
||||
const {errors, layerIndex} = this.props;
|
||||
|
||||
@@ -204,7 +204,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
message: error.parsed.data.message
|
||||
};
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
let sourceLayerIds;
|
||||
const layer = this.props.layer as Exclude<LayerSpecification, BackgroundLayerSpecification>;
|
||||
@@ -213,7 +213,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
}
|
||||
|
||||
switch(type) {
|
||||
case 'layer': return <div>
|
||||
case "layer": return <div>
|
||||
<FieldId
|
||||
value={this.props.layer.id}
|
||||
wdKey="layer-editor.layer-id"
|
||||
@@ -229,56 +229,56 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
changeType(this.props.layer, newType)
|
||||
)}
|
||||
/>
|
||||
{this.props.layer.type !== 'background' && <FieldSource
|
||||
{this.props.layer.type !== "background" && <FieldSource
|
||||
error={errorData.source}
|
||||
sourceIds={Object.keys(this.props.sources!)}
|
||||
value={this.props.layer.source}
|
||||
onChange={v => this.changeProperty(null, 'source', v)}
|
||||
onChange={v => this.changeProperty(null, "source", v)}
|
||||
/>
|
||||
}
|
||||
{!NON_SOURCE_LAYERS.includes(this.props.layer.type) &&
|
||||
<FieldSourceLayer
|
||||
error={errorData['source-layer']}
|
||||
error={errorData["source-layer"]}
|
||||
sourceLayerIds={sourceLayerIds}
|
||||
value={(this.props.layer as any)['source-layer']}
|
||||
onChange={v => this.changeProperty(null, 'source-layer', v)}
|
||||
value={(this.props.layer as any)["source-layer"]}
|
||||
onChange={v => this.changeProperty(null, "source-layer", v)}
|
||||
/>
|
||||
}
|
||||
<FieldMinZoom
|
||||
error={errorData.minzoom}
|
||||
value={this.props.layer.minzoom}
|
||||
onChange={v => this.changeProperty(null, 'minzoom', v)}
|
||||
onChange={v => this.changeProperty(null, "minzoom", v)}
|
||||
/>
|
||||
<FieldMaxZoom
|
||||
error={errorData.maxzoom}
|
||||
value={this.props.layer.maxzoom}
|
||||
onChange={v => this.changeProperty(null, 'maxzoom', v)}
|
||||
onChange={v => this.changeProperty(null, "maxzoom", v)}
|
||||
/>
|
||||
<FieldComment
|
||||
error={errorData.comment}
|
||||
value={comment}
|
||||
onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == "" ? undefined : v)}
|
||||
onChange={v => this.changeProperty("metadata", "maputnik:comment", v == "" ? undefined : v)}
|
||||
/>
|
||||
</div>
|
||||
case 'filter': return <div>
|
||||
</div>;
|
||||
case "filter": return <div>
|
||||
<div className="maputnik-filter-editor-wrapper">
|
||||
<FilterEditor
|
||||
errors={errorData}
|
||||
filter={(this.props.layer as any).filter}
|
||||
properties={this.props.vectorLayers[(this.props.layer as any)['source-layer']]}
|
||||
onChange={f => this.changeProperty(null, 'filter', f)}
|
||||
properties={this.props.vectorLayers[(this.props.layer as any)["source-layer"]]}
|
||||
onChange={f => this.changeProperty(null, "filter", f)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
case 'properties':
|
||||
</div>;
|
||||
case "properties":
|
||||
return <PropertyGroup
|
||||
errors={errorData}
|
||||
layer={this.props.layer}
|
||||
groupFields={fields!}
|
||||
spec={this.props.spec}
|
||||
onChange={this.changeProperty.bind(this)}
|
||||
/>
|
||||
case 'jsoneditor':
|
||||
/>;
|
||||
case "jsoneditor":
|
||||
return <FieldJson
|
||||
layer={this.props.layer}
|
||||
onChange={(layer) => {
|
||||
@@ -287,8 +287,8 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
layer
|
||||
);
|
||||
}}
|
||||
/>
|
||||
default: return <></>
|
||||
/>;
|
||||
default: return <></>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -296,16 +296,16 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
this.props.onMoveLayer({
|
||||
oldIndex: this.props.layerIndex,
|
||||
newIndex: this.props.layerIndex+offset
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
|
||||
const groupIds: string[] = [];
|
||||
const layerType = this.props.layer.type
|
||||
const layerType = this.props.layer.type;
|
||||
const groups = layoutGroups(layerType, t).filter(group => {
|
||||
return !(layerType === 'background' && group.type === 'source')
|
||||
return !(layerType === "background" && group.type === "source");
|
||||
}).map(group => {
|
||||
const groupId = group.id;
|
||||
groupIds.push(groupId);
|
||||
@@ -318,10 +318,10 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
onActiveToggle={this.onGroupToggle.bind(this, group.title)}
|
||||
>
|
||||
{this.renderGroupType(group.type, group.fields)}
|
||||
</LayerEditorGroup>
|
||||
})
|
||||
</LayerEditorGroup>;
|
||||
});
|
||||
|
||||
const layout = this.props.layer.layout || {}
|
||||
const layout = this.props.layer.layout || {};
|
||||
|
||||
const items: {[key: string]: {
|
||||
text: string,
|
||||
@@ -356,14 +356,14 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
handler: () => this.moveLayer(+1),
|
||||
wdKey: "menu-move-layer-down"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function handleSelection(id: string, event: React.SyntheticEvent) {
|
||||
event.stopPropagation();
|
||||
items[id].handler();
|
||||
}
|
||||
|
||||
return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
|
||||
return <IconContext.Provider value={{size: "14px", color: "#8e8e8e"}}>
|
||||
<section className="maputnik-layer-editor"
|
||||
role="main"
|
||||
aria-label={t("Layer editor")}
|
||||
@@ -395,7 +395,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
<MenuItem value={id} className='more-menu__menu__item' data-wd-key={item.wdKey}>
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
</li>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
</Menu>
|
||||
@@ -412,7 +412,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
{groups}
|
||||
</Accordion>
|
||||
</section>
|
||||
</IconContext.Provider>
|
||||
</IconContext.Provider>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React from 'react'
|
||||
import Icon from '@mdi/react'
|
||||
import React from "react";
|
||||
import Icon from "@mdi/react";
|
||||
import {
|
||||
mdiMenuDown,
|
||||
mdiMenuUp
|
||||
} from '@mdi/js';
|
||||
} from "@mdi/js";
|
||||
import {
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from 'react-accessible-accordion';
|
||||
} from "react-accessible-accordion";
|
||||
|
||||
|
||||
type LayerEditorGroupProps = {
|
||||
@@ -46,6 +46,6 @@ export default class LayerEditorGroup extends React.Component<LayerEditorGroupPr
|
||||
<AccordionItemPanel>
|
||||
{this.props.children}
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
</AccordionItem>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
import React, {type JSX} from 'react'
|
||||
import classnames from 'classnames'
|
||||
import lodash from 'lodash';
|
||||
import React, {type JSX} from "react";
|
||||
import classnames from "classnames";
|
||||
import lodash from "lodash";
|
||||
import {
|
||||
DndContext,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCenter,
|
||||
DragEndEvent,
|
||||
} from '@dnd-kit/core';
|
||||
type DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
SortableContext,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
} from "@dnd-kit/sortable";
|
||||
|
||||
import LayerListGroup from './LayerListGroup'
|
||||
import LayerListItem from './LayerListItem'
|
||||
import ModalAdd from './modals/ModalAdd'
|
||||
import LayerListGroup from "./LayerListGroup";
|
||||
import LayerListItem from "./LayerListItem";
|
||||
import ModalAdd from "./modals/ModalAdd";
|
||||
|
||||
import type {LayerSpecification, SourceSpecification} from 'maplibre-gl';
|
||||
import generateUniqueId from '../libs/document-uid';
|
||||
import { findClosestCommonPrefix, layerPrefix } from '../libs/layer';
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { OnMoveLayerCallback } from '../libs/definitions';
|
||||
import type {LayerSpecification, SourceSpecification} from "maplibre-gl";
|
||||
import generateUniqueId from "../libs/document-uid";
|
||||
import { findClosestCommonPrefix, layerPrefix } from "../libs/layer";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { type OnMoveLayerCallback } from "../libs/definitions";
|
||||
|
||||
type LayerListContainerProps = {
|
||||
layers: LayerSpecification[]
|
||||
@@ -48,7 +48,7 @@ type LayerListContainerState = {
|
||||
class LayerListContainerInternal extends React.Component<LayerListContainerInternalProps, LayerListContainerState> {
|
||||
static defaultProps = {
|
||||
onLayerSelect: () => {},
|
||||
}
|
||||
};
|
||||
selectedItemRef: React.RefObject<any>;
|
||||
scrollContainerRef: React.RefObject<HTMLElement | null>;
|
||||
|
||||
@@ -65,7 +65,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
isOpen: {
|
||||
add: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
toggleModal(modalName: string) {
|
||||
@@ -78,74 +78,74 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
...this.state.isOpen,
|
||||
[modalName]: !this.state.isOpen[modalName]
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
toggleLayers = () => {
|
||||
let idx = 0
|
||||
let idx = 0;
|
||||
|
||||
const newGroups: {[key:string]: boolean} = {}
|
||||
const newGroups: {[key:string]: boolean} = {};
|
||||
|
||||
this.groupedLayers().forEach(layers => {
|
||||
const groupPrefix = layerPrefix(layers[0].id)
|
||||
const lookupKey = [groupPrefix, idx].join('-')
|
||||
const groupPrefix = layerPrefix(layers[0].id);
|
||||
const lookupKey = [groupPrefix, idx].join("-");
|
||||
|
||||
|
||||
if (layers.length > 1) {
|
||||
newGroups[lookupKey] = this.state.areAllGroupsExpanded
|
||||
newGroups[lookupKey] = this.state.areAllGroupsExpanded;
|
||||
}
|
||||
|
||||
layers.forEach((_layer) => {
|
||||
idx += 1
|
||||
})
|
||||
idx += 1;
|
||||
});
|
||||
});
|
||||
|
||||
this.setState({
|
||||
collapsedGroups: newGroups,
|
||||
areAllGroupsExpanded: !this.state.areAllGroupsExpanded
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
groupedLayers(): (LayerSpecification & {key: string})[][] {
|
||||
const groups = []
|
||||
const groups = [];
|
||||
const layerIdCount = new Map();
|
||||
|
||||
for (let i = 0; i < this.props.layers.length; i++) {
|
||||
const origLayer = this.props.layers[i];
|
||||
const previousLayer = this.props.layers[i-1]
|
||||
const previousLayer = this.props.layers[i-1];
|
||||
layerIdCount.set(origLayer.id,
|
||||
layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
|
||||
);
|
||||
const layer = {
|
||||
...origLayer,
|
||||
key: `layers-list-${origLayer.id}-${layerIdCount.get(origLayer.id)}`,
|
||||
}
|
||||
};
|
||||
if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) {
|
||||
const lastGroup = groups[groups.length - 1]
|
||||
lastGroup.push(layer)
|
||||
const lastGroup = groups[groups.length - 1];
|
||||
lastGroup.push(layer);
|
||||
} else {
|
||||
groups.push([layer])
|
||||
groups.push([layer]);
|
||||
}
|
||||
}
|
||||
return groups
|
||||
return groups;
|
||||
}
|
||||
|
||||
toggleLayerGroup(groupPrefix: string, idx: number) {
|
||||
const lookupKey = [groupPrefix, idx].join('-')
|
||||
const newGroups = { ...this.state.collapsedGroups }
|
||||
const lookupKey = [groupPrefix, idx].join("-");
|
||||
const newGroups = { ...this.state.collapsedGroups };
|
||||
if(lookupKey in this.state.collapsedGroups) {
|
||||
newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
|
||||
newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey];
|
||||
} else {
|
||||
newGroups[lookupKey] = false
|
||||
newGroups[lookupKey] = false;
|
||||
}
|
||||
this.setState({
|
||||
collapsedGroups: newGroups
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
isCollapsed(groupPrefix: string, idx: number) {
|
||||
const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
|
||||
return collapsed === undefined ? true : collapsed
|
||||
const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join("-")];
|
||||
return collapsed === undefined ? true : collapsed;
|
||||
}
|
||||
|
||||
shouldComponentUpdate (nextProps: LayerListContainerProps, nextState: LayerListContainerState) {
|
||||
@@ -177,7 +177,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
const out = {
|
||||
...props
|
||||
} as LayerListContainerProps & { layers?: any };
|
||||
delete out['layers'];
|
||||
delete out["layers"];
|
||||
return out;
|
||||
}
|
||||
|
||||
@@ -200,7 +200,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
const options = {
|
||||
root: this.scrollContainerRef.current,
|
||||
threshold: 1.0
|
||||
}
|
||||
};
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
observer.unobserve(target);
|
||||
if (entries.length > 0 && entries[0].intersectionRatio < 1) {
|
||||
@@ -215,25 +215,25 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
|
||||
render() {
|
||||
|
||||
const listItems: JSX.Element[] = []
|
||||
let idx = 0
|
||||
const listItems: JSX.Element[] = [];
|
||||
let idx = 0;
|
||||
const layersByGroup = this.groupedLayers();
|
||||
layersByGroup.forEach(layers => {
|
||||
const groupPrefix = layerPrefix(layers[0].id)
|
||||
const groupPrefix = layerPrefix(layers[0].id);
|
||||
if(layers.length > 1) {
|
||||
const grp = <LayerListGroup
|
||||
data-wd-key={[groupPrefix, idx].join('-')}
|
||||
data-wd-key={[groupPrefix, idx].join("-")}
|
||||
aria-controls={layers.map(l => l.key).join(" ")}
|
||||
key={`group-${groupPrefix}-${idx}`}
|
||||
title={groupPrefix}
|
||||
isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
|
||||
onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
|
||||
/>
|
||||
listItems.push(grp)
|
||||
/>;
|
||||
listItems.push(grp);
|
||||
}
|
||||
|
||||
layers.forEach((layer, idxInGroup) => {
|
||||
const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
|
||||
const groupIdx = findClosestCommonPrefix(this.props.layers, idx);
|
||||
|
||||
const layerError = this.props.errors.find(error => {
|
||||
return (
|
||||
@@ -250,9 +250,9 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
|
||||
const listItem = <LayerListItem
|
||||
className={classnames({
|
||||
'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
|
||||
'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
|
||||
'maputnik-layer-list-item--error': !!layerError
|
||||
"maputnik-layer-list-item-collapsed": layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
|
||||
"maputnik-layer-list-item-group-last": idxInGroup == layers.length - 1 && layers.length > 1,
|
||||
"maputnik-layer-list-item--error": !!layerError
|
||||
})}
|
||||
key={layer.key}
|
||||
id={layer.key}
|
||||
@@ -266,11 +266,11 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
onLayerCopy={this.props.onLayerCopy.bind(this)}
|
||||
onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
|
||||
{...additionalProps}
|
||||
/>
|
||||
listItems.push(listItem)
|
||||
idx += 1
|
||||
})
|
||||
})
|
||||
/>;
|
||||
listItems.push(listItem);
|
||||
idx += 1;
|
||||
});
|
||||
});
|
||||
|
||||
const t = this.props.t;
|
||||
|
||||
@@ -286,7 +286,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
layers={this.props.layers}
|
||||
sources={this.props.sources}
|
||||
isOpen={this.state.isOpen.add}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'add')}
|
||||
onOpenToggle={this.toggleModal.bind(this, "add")}
|
||||
onLayersChange={this.props.onLayersChange}
|
||||
/>
|
||||
<header className="maputnik-layer-list-header">
|
||||
@@ -310,7 +310,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
<div className="maputnik-default-property">
|
||||
<div className="maputnik-multibutton">
|
||||
<button
|
||||
onClick={this.toggleModal.bind(this, 'add')}
|
||||
onClick={this.toggleModal.bind(this, "add")}
|
||||
data-wd-key="layer-list:add-layer"
|
||||
className="maputnik-button maputnik-button-selected">
|
||||
{t("Add Layer")}
|
||||
@@ -326,7 +326,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
|
||||
{listItems}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</section>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -360,6 +360,6 @@ const LayerList: React.FC<LayerListProps> = (props) => {
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default LayerList;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React from 'react'
|
||||
import Collapser from './Collapser'
|
||||
import React from "react";
|
||||
import Collapser from "./Collapser";
|
||||
|
||||
type LayerListGroupProps = {
|
||||
title: string
|
||||
"data-wd-key"?: string
|
||||
isActive: boolean
|
||||
onActiveToggle(...args: unknown[]): unknown
|
||||
'aria-controls'?: string
|
||||
"aria-controls"?: string
|
||||
};
|
||||
|
||||
export default class LayerListGroup extends React.Component<LayerListGroupProps> {
|
||||
@@ -18,7 +18,7 @@ export default class LayerListGroup extends React.Component<LayerListGroupProps>
|
||||
>
|
||||
<button
|
||||
className="maputnik-layer-list-group-title"
|
||||
aria-controls={this.props['aria-controls']}
|
||||
aria-controls={this.props["aria-controls"]}
|
||||
aria-expanded={this.props.isActive}
|
||||
>
|
||||
{this.props.title}
|
||||
@@ -29,6 +29,6 @@ export default class LayerListGroup extends React.Component<LayerListGroupProps>
|
||||
isCollapsed={this.props.isActive}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</li>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
|
||||
import { IconContext } from 'react-icons'
|
||||
import {useSortable} from '@dnd-kit/sortable'
|
||||
import {CSS} from '@dnd-kit/utilities'
|
||||
import React from "react";
|
||||
import classnames from "classnames";
|
||||
import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from "react-icons/md";
|
||||
import { IconContext } from "react-icons";
|
||||
import {useSortable} from "@dnd-kit/sortable";
|
||||
import {CSS} from "@dnd-kit/utilities";
|
||||
|
||||
import IconLayer from './IconLayer'
|
||||
import IconLayer from "./IconLayer";
|
||||
|
||||
|
||||
type DraggableLabelProps = {
|
||||
@@ -21,12 +21,12 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
|
||||
<IconLayer
|
||||
className="layer-handle__icon"
|
||||
type={props.layerType}
|
||||
style={{ width: '1em', height: '1em', verticalAlign: 'middle' }}
|
||||
style={{ width: "1em", height: "1em", verticalAlign: "middle" }}
|
||||
/>
|
||||
<button className="maputnik-layer-list-item-id">
|
||||
{props.layerId}
|
||||
</button>
|
||||
</div>
|
||||
</div>;
|
||||
};
|
||||
|
||||
type IconActionProps = {
|
||||
@@ -40,17 +40,17 @@ type IconActionProps = {
|
||||
class IconAction extends React.Component<IconActionProps> {
|
||||
renderIcon() {
|
||||
switch(this.props.action) {
|
||||
case 'duplicate': return <MdContentCopy />
|
||||
case 'show': return <MdVisibility />
|
||||
case 'hide': return <MdVisibilityOff />
|
||||
case 'delete': return <MdDelete />
|
||||
case "duplicate": return <MdContentCopy />;
|
||||
case "show": return <MdVisibility />;
|
||||
case "hide": return <MdVisibilityOff />;
|
||||
case "delete": return <MdDelete />;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {classBlockName, classBlockModifier} = this.props;
|
||||
|
||||
let classAdditions = '';
|
||||
let classAdditions = "";
|
||||
if (classBlockName) {
|
||||
classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
|
||||
|
||||
@@ -68,7 +68,7 @@ class IconAction extends React.Component<IconActionProps> {
|
||||
aria-hidden="true"
|
||||
>
|
||||
{this.renderIcon()}
|
||||
</button>
|
||||
</button>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,7 +89,7 @@ type LayerListItemProps = {
|
||||
const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props, ref) => {
|
||||
const {
|
||||
isSelected = false,
|
||||
visibility = 'visible',
|
||||
visibility = "visible",
|
||||
onLayerCopy = () => {},
|
||||
onLayerDestroy = () => {},
|
||||
onLayerVisibilityToggle = () => {},
|
||||
@@ -110,12 +110,12 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
};
|
||||
|
||||
const visibilityAction = visibility === 'visible' ? 'show' : 'hide';
|
||||
const visibilityAction = visibility === "visible" ? "show" : "hide";
|
||||
|
||||
// Cast ref to MutableRefObject since we know from the codebase that's what's always passed
|
||||
const refObject = ref as React.MutableRefObject<HTMLLIElement | null> | null;
|
||||
|
||||
return <IconContext.Provider value={{size: '14px'}}>
|
||||
return <IconContext.Provider value={{size: "14px"}}>
|
||||
<li
|
||||
ref={(node) => {
|
||||
setNodeRef(node);
|
||||
@@ -141,13 +141,13 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
|
||||
<span style={{flexGrow: 1}} />
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:" + props.layerId+":delete"}
|
||||
action={'delete'}
|
||||
action={"delete"}
|
||||
classBlockName="delete"
|
||||
onClick={_e => onLayerDestroy!(props.layerIndex)}
|
||||
/>
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:" + props.layerId+":copy"}
|
||||
action={'duplicate'}
|
||||
action={"duplicate"}
|
||||
classBlockName="duplicate"
|
||||
onClick={_e => onLayerCopy!(props.layerIndex)}
|
||||
/>
|
||||
@@ -159,7 +159,7 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
|
||||
onClick={_e => onLayerVisibilityToggle!(props.layerIndex)}
|
||||
/>
|
||||
</li>
|
||||
</IconContext.Provider>
|
||||
</IconContext.Provider>;
|
||||
});
|
||||
|
||||
export default LayerListItem;
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import React from 'react'
|
||||
import {createRoot} from 'react-dom/client'
|
||||
import MapLibreGl, {LayerSpecification, LngLat, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
|
||||
import MaplibreInspect from '@maplibre/maplibre-gl-inspect'
|
||||
import colors from '@maplibre/maplibre-gl-inspect/lib/colors'
|
||||
import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
|
||||
import MapMaplibreGlFeaturePropertyPopup, { InspectFeature } from './MapMaplibreGlFeaturePropertyPopup'
|
||||
import Color from 'color'
|
||||
import ZoomControl from '../libs/zoomcontrol'
|
||||
import { HighlightedLayer, colorHighlightedLayer } from '../libs/highlight'
|
||||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
import '../maplibregl.css'
|
||||
import '../libs/maplibre-rtl'
|
||||
import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
|
||||
import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
|
||||
import { withTranslation, WithTranslation } from 'react-i18next'
|
||||
import i18next from 'i18next'
|
||||
import React from "react";
|
||||
import {createRoot} from "react-dom/client";
|
||||
import MapLibreGl, {type LayerSpecification, type LngLat, type Map, type MapOptions, type SourceSpecification, type StyleSpecification} from "maplibre-gl";
|
||||
import MaplibreInspect from "@maplibre/maplibre-gl-inspect";
|
||||
import colors from "@maplibre/maplibre-gl-inspect/lib/colors";
|
||||
import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
|
||||
import MapMaplibreGlFeaturePropertyPopup, { type InspectFeature } from "./MapMaplibreGlFeaturePropertyPopup";
|
||||
import Color from "color";
|
||||
import ZoomControl from "../libs/zoomcontrol";
|
||||
import { type HighlightedLayer, colorHighlightedLayer } from "../libs/highlight";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import "../maplibregl.css";
|
||||
import "../libs/maplibre-rtl";
|
||||
import MaplibreGeocoder, { type MaplibreGeocoderApi, type MaplibreGeocoderApiConfig } from "@maplibre/maplibre-gl-geocoder";
|
||||
import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
|
||||
import { withTranslation, type WithTranslation } from "react-i18next";
|
||||
import i18next from "i18next";
|
||||
import { Protocol } from "pmtiles";
|
||||
|
||||
function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[], highlightedLayer?: HighlightedLayer) {
|
||||
@@ -22,30 +22,30 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
|
||||
"id": "background",
|
||||
"type": "background",
|
||||
"paint": {
|
||||
"background-color": '#1c1f24',
|
||||
"background-color": "#1c1f24",
|
||||
}
|
||||
} as LayerSpecification
|
||||
} as LayerSpecification;
|
||||
|
||||
const layer = colorHighlightedLayer(highlightedLayer)
|
||||
const layer = colorHighlightedLayer(highlightedLayer);
|
||||
if(layer) {
|
||||
coloredLayers.push(layer)
|
||||
coloredLayers.push(layer);
|
||||
}
|
||||
|
||||
const sources: {[key:string]: SourceSpecification} = {}
|
||||
const sources: {[key:string]: SourceSpecification} = {};
|
||||
|
||||
Object.keys(originalMapStyle.sources).forEach(sourceId => {
|
||||
const source = originalMapStyle.sources[sourceId]
|
||||
if(source.type !== 'raster' && source.type !== 'raster-dem') {
|
||||
sources[sourceId] = source
|
||||
const source = originalMapStyle.sources[sourceId];
|
||||
if(source.type !== "raster" && source.type !== "raster-dem") {
|
||||
sources[sourceId] = source;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const inspectStyle = {
|
||||
...originalMapStyle,
|
||||
sources: sources,
|
||||
layers: [backgroundLayer].concat(coloredLayers as LayerSpecification[])
|
||||
}
|
||||
return inspectStyle
|
||||
};
|
||||
return inspectStyle;
|
||||
}
|
||||
|
||||
type MapMaplibreGlInternalProps = {
|
||||
@@ -78,20 +78,20 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
onLayerSelect: () => {},
|
||||
onChange: () => {},
|
||||
options: {} as MapOptions,
|
||||
}
|
||||
container: HTMLDivElement | null = null
|
||||
};
|
||||
container: HTMLDivElement | null = null;
|
||||
|
||||
constructor(props: MapMaplibreGlInternalProps) {
|
||||
super(props)
|
||||
super(props);
|
||||
this.state = {
|
||||
map: null,
|
||||
inspect: null,
|
||||
geocoder: null,
|
||||
zoomControl: null,
|
||||
}
|
||||
i18next.on('languageChanged', () => {
|
||||
};
|
||||
i18next.on("languageChanged", () => {
|
||||
this.forceUpdate();
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -120,7 +120,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
}
|
||||
|
||||
if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
|
||||
this.state.inspect.toggleInspector()
|
||||
this.state.inspect.toggleInspector();
|
||||
}
|
||||
if (this.state.inspect && this.props.inspectModeEnabled) {
|
||||
this.state.inspect.setOriginalStyle(styleWithTokens);
|
||||
@@ -152,7 +152,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
const center = map.getCenter();
|
||||
const zoom = map.getZoom();
|
||||
this.props.onChange({center, zoom});
|
||||
}
|
||||
};
|
||||
mapViewChange();
|
||||
|
||||
map.showTileBoundaries = mapOpts.showTileBoundaries!;
|
||||
@@ -162,12 +162,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
const geocoder = this.initGeocoder(map);
|
||||
|
||||
const zoomControl = new ZoomControl();
|
||||
map.addControl(zoomControl, 'top-right');
|
||||
map.addControl(zoomControl, "top-right");
|
||||
|
||||
const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
|
||||
map.addControl(nav, 'top-right');
|
||||
map.addControl(nav, "top-right");
|
||||
|
||||
const tmpNode = document.createElement('div');
|
||||
const tmpNode = document.createElement("div");
|
||||
const root = createRoot(tmpNode);
|
||||
|
||||
const inspectPopup = new MapLibreGl.Popup({
|
||||
@@ -182,17 +182,17 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
showInspectButton: false,
|
||||
blockHoverPopupOnClick: true,
|
||||
assignLayerColor: (layerId: string, alpha: number) => {
|
||||
return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
|
||||
return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string();
|
||||
},
|
||||
buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
|
||||
renderPopup: (features: InspectFeature[]) => {
|
||||
if(this.props.inspectModeEnabled) {
|
||||
inspectPopup.once('open', () => {
|
||||
inspectPopup.once("open", () => {
|
||||
root.render(<MapMaplibreGlFeaturePropertyPopup features={features} />);
|
||||
});
|
||||
return tmpNode;
|
||||
} else {
|
||||
inspectPopup.once('open', () => {
|
||||
inspectPopup.once("open", () => {
|
||||
root.render(<MapMaplibreGlLayerPopup
|
||||
features={features}
|
||||
onLayerSelect={this.onLayerSelectById}
|
||||
@@ -202,8 +202,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
return tmpNode;
|
||||
}
|
||||
}
|
||||
})
|
||||
map.addControl(inspect)
|
||||
});
|
||||
map.addControl(inspect);
|
||||
|
||||
map.on("style.load", () => {
|
||||
this.setState({
|
||||
@@ -213,18 +213,18 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
zoomControl,
|
||||
zoom: map.getZoom()
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
map.on("data", e => {
|
||||
if(e.dataType !== 'tile') return
|
||||
if(e.dataType !== "tile") return;
|
||||
this.props.onDataChange!({
|
||||
map: this.state.map
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
map.on("error", e => {
|
||||
console.log("ERROR", e);
|
||||
})
|
||||
});
|
||||
|
||||
map.on("zoom", _e => {
|
||||
this.setState({
|
||||
@@ -239,7 +239,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
onLayerSelectById = (id: string) => {
|
||||
const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
|
||||
this.props.onLayerSelect(index);
|
||||
}
|
||||
};
|
||||
|
||||
initGeocoder(map: Map) {
|
||||
const geocoderConfig = {
|
||||
@@ -257,15 +257,15 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
(feature.bbox[3] - feature.bbox[1]) / 2
|
||||
];
|
||||
const point = {
|
||||
type: 'Feature',
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
type: "Point",
|
||||
coordinates: center
|
||||
},
|
||||
place_name: feature.properties.display_name,
|
||||
properties: feature.properties,
|
||||
text: feature.properties.display_name,
|
||||
place_type: ['place'],
|
||||
place_type: ["place"],
|
||||
center
|
||||
};
|
||||
features.push(point);
|
||||
@@ -282,7 +282,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
placeholder: this.props.t("Search"),
|
||||
maplibregl: MapLibreGl,
|
||||
});
|
||||
map.addControl(geocoder, 'top-left');
|
||||
map.addControl(geocoder, "top-left");
|
||||
return geocoder;
|
||||
}
|
||||
|
||||
@@ -294,9 +294,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
className="maputnik-map__map"
|
||||
role="region"
|
||||
aria-label={t("Map view")}
|
||||
ref={x => {this.container = x}}
|
||||
ref={x => {this.container = x;}}
|
||||
data-wd-key="maplibre:map"
|
||||
></div>
|
||||
></div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import React from 'react'
|
||||
import type { GeoJSONFeatureWithSourceLayer } from '@maplibre/maplibre-gl-inspect'
|
||||
import React from "react";
|
||||
import type { GeoJSONFeatureWithSourceLayer } from "@maplibre/maplibre-gl-inspect";
|
||||
|
||||
export type InspectFeature = GeoJSONFeatureWithSourceLayer & {
|
||||
inspectModeCounter?: number
|
||||
counter?: number
|
||||
}
|
||||
};
|
||||
|
||||
function displayValue(value: string | number | Date | object | undefined) {
|
||||
if (typeof value === 'undefined' || value === null) return value;
|
||||
if (typeof value === "undefined" || value === null) return value;
|
||||
if (value instanceof Date) return value.toLocaleString();
|
||||
if (typeof value === 'object' ||
|
||||
typeof value === 'number' ||
|
||||
typeof value === 'string') return value.toString();
|
||||
if (typeof value === "object" ||
|
||||
typeof value === "number" ||
|
||||
typeof value === "string") return value.toString();
|
||||
return value;
|
||||
}
|
||||
|
||||
@@ -19,21 +19,21 @@ function renderKeyValueTableRow(key: string, value: string | undefined) {
|
||||
return <tr key={key}>
|
||||
<td className="maputnik-popup-table-cell">{key}</td>
|
||||
<td className="maputnik-popup-table-cell">{value}</td>
|
||||
</tr>
|
||||
</tr>;
|
||||
}
|
||||
|
||||
function renderFeature(feature: InspectFeature, idx: number) {
|
||||
return <React.Fragment key={idx}>
|
||||
<tr>
|
||||
<td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
|
||||
<td colSpan={2} className="maputnik-popup-layer-id">{feature.layer["source"]}: {feature.layer["source-layer"]}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
|
||||
</tr>
|
||||
{renderKeyValueTableRow("$type", feature.geometry.type)}
|
||||
{renderKeyValueTableRow("$id", displayValue(feature.id))}
|
||||
{Object.keys(feature.properties).map(propertyName => {
|
||||
const property = feature.properties[propertyName];
|
||||
return renderKeyValueTableRow(propertyName, displayValue(property))
|
||||
return renderKeyValueTableRow(propertyName, displayValue(property));
|
||||
})}
|
||||
</React.Fragment>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
function removeDuplicatedFeatures(features: InspectFeature[]) {
|
||||
@@ -41,22 +41,22 @@ function removeDuplicatedFeatures(features: InspectFeature[]) {
|
||||
|
||||
features.forEach(feature => {
|
||||
const featureIndex = uniqueFeatures.findIndex(feature2 => {
|
||||
return feature.layer['source-layer'] === feature2.layer['source-layer']
|
||||
&& JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
|
||||
})
|
||||
return feature.layer["source-layer"] === feature2.layer["source-layer"]
|
||||
&& JSON.stringify(feature.properties) === JSON.stringify(feature2.properties);
|
||||
});
|
||||
|
||||
if(featureIndex === -1) {
|
||||
uniqueFeatures.push(feature)
|
||||
uniqueFeatures.push(feature);
|
||||
} else {
|
||||
if('inspectModeCounter' in uniqueFeatures[featureIndex]) {
|
||||
uniqueFeatures[featureIndex].inspectModeCounter!++
|
||||
if("inspectModeCounter" in uniqueFeatures[featureIndex]) {
|
||||
uniqueFeatures[featureIndex].inspectModeCounter!++;
|
||||
} else {
|
||||
uniqueFeatures[featureIndex].inspectModeCounter = 2
|
||||
uniqueFeatures[featureIndex].inspectModeCounter = 2;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return uniqueFeatures
|
||||
return uniqueFeatures;
|
||||
}
|
||||
|
||||
type FeaturePropertyPopupProps = {
|
||||
@@ -65,16 +65,16 @@ type FeaturePropertyPopupProps = {
|
||||
|
||||
class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
|
||||
render() {
|
||||
const features = removeDuplicatedFeatures(this.props.features)
|
||||
const features = removeDuplicatedFeatures(this.props.features);
|
||||
return <div className="maputnik-feature-property-popup" dir="ltr" data-wd-key="feature-property-popup">
|
||||
<table className="maputnik-popup-table">
|
||||
<tbody>
|
||||
{features.map(renderFeature)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default FeaturePropertyPopup
|
||||
export default FeaturePropertyPopup;
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
import React from 'react'
|
||||
import IconLayer from './IconLayer'
|
||||
import type {InspectFeature} from './MapMaplibreGlFeaturePropertyPopup';
|
||||
import React from "react";
|
||||
import IconLayer from "./IconLayer";
|
||||
import type {InspectFeature} from "./MapMaplibreGlFeaturePropertyPopup";
|
||||
|
||||
function groupFeaturesBySourceLayer(features: InspectFeature[]) {
|
||||
const sources: {[key: string]: InspectFeature[]} = {}
|
||||
const sources: {[key: string]: InspectFeature[]} = {};
|
||||
|
||||
const returnedFeatures: {[key: string]: number} = {}
|
||||
const returnedFeatures: {[key: string]: number} = {};
|
||||
|
||||
features.forEach(feature => {
|
||||
const sourceKey = feature.layer['source-layer'] as string;
|
||||
const sourceKey = feature.layer["source-layer"] as string;
|
||||
if(Object.prototype.hasOwnProperty.call(returnedFeatures, feature.layer.id)) {
|
||||
returnedFeatures[feature.layer.id]++
|
||||
returnedFeatures[feature.layer.id]++;
|
||||
|
||||
const featureObject = sources[sourceKey].find((f: InspectFeature) => f.layer.id === feature.layer.id)
|
||||
const featureObject = sources[sourceKey].find((f: InspectFeature) => f.layer.id === feature.layer.id);
|
||||
|
||||
featureObject!.counter = returnedFeatures[feature.layer.id]
|
||||
featureObject!.counter = returnedFeatures[feature.layer.id];
|
||||
} else {
|
||||
sources[sourceKey] = sources[sourceKey] || []
|
||||
sources[sourceKey].push(feature)
|
||||
sources[sourceKey] = sources[sourceKey] || [];
|
||||
sources[sourceKey].push(feature);
|
||||
|
||||
returnedFeatures[feature.layer.id] = 1
|
||||
returnedFeatures[feature.layer.id] = 1;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return sources
|
||||
return sources;
|
||||
}
|
||||
|
||||
type FeatureLayerPopupProps = {
|
||||
@@ -66,7 +66,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const sources = groupFeaturesBySourceLayer(this.props.features)
|
||||
const sources = groupFeaturesBySourceLayer(this.props.features);
|
||||
|
||||
const items = Object.keys(sources).map(vectorLayerId => {
|
||||
const layers = sources[vectorLayerId].map((feature: InspectFeature, idx: number) => {
|
||||
@@ -83,7 +83,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
|
||||
<label
|
||||
className="maputnik-popup-layer__label"
|
||||
onClick={() => {
|
||||
this.props.onLayerSelect(feature.layer.id)
|
||||
this.props.onLayerSelect(feature.layer.id);
|
||||
}}
|
||||
>
|
||||
{feature.layer.type &&
|
||||
@@ -96,19 +96,19 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
|
||||
{feature.layer.id}
|
||||
{feature.counter && <span> × {feature.counter}</span>}
|
||||
</label>
|
||||
</div>
|
||||
})
|
||||
</div>;
|
||||
});
|
||||
return <div key={vectorLayerId}>
|
||||
<div className="maputnik-popup-layer-id">{vectorLayerId}</div>
|
||||
{layers}
|
||||
</div>
|
||||
})
|
||||
</div>;
|
||||
});
|
||||
|
||||
return <div className="maputnik-feature-layer-popup" data-wd-key="feature-layer-popup" dir="ltr">
|
||||
{items}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default FeatureLayerPopup
|
||||
export default FeatureLayerPopup;
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React from 'react'
|
||||
import {throttle} from 'lodash';
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import {throttle} from "lodash";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup';
|
||||
import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
|
||||
|
||||
import 'ol/ol.css'
|
||||
import "ol/ol.css";
|
||||
//@ts-ignore
|
||||
import {apply} from 'ol-mapbox-style';
|
||||
import {Map, View, Overlay} from 'ol';
|
||||
import {apply} from "ol-mapbox-style";
|
||||
import {Map, View, Overlay} from "ol";
|
||||
|
||||
import {toLonLat} from 'ol/proj';
|
||||
import type {StyleSpecification} from 'maplibre-gl';
|
||||
import {toLonLat} from "ol/proj";
|
||||
import type {StyleSpecification} from "maplibre-gl";
|
||||
|
||||
|
||||
function renderCoords (coords: string[]) {
|
||||
@@ -19,8 +19,8 @@ function renderCoords (coords: string[]) {
|
||||
}
|
||||
else {
|
||||
return <span className="maputnik-coords">
|
||||
{coords.map((coord) => String(coord).padStart(7, "\u00A0")).join(', ')}
|
||||
</span>
|
||||
{coords.map((coord) => String(coord).padStart(7, "\u00A0")).join(", ")}
|
||||
</span>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
|
||||
onMapLoaded: () => {},
|
||||
onDataChange: () => {},
|
||||
onLayerSelect: () => {},
|
||||
}
|
||||
};
|
||||
updateStyle: any;
|
||||
map: any;
|
||||
container: HTMLDivElement | null = null;
|
||||
@@ -101,15 +101,15 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
|
||||
})
|
||||
});
|
||||
|
||||
map.on('pointermove', (evt) => {
|
||||
map.on("pointermove", (evt) => {
|
||||
const coords = toLonLat(evt.coordinate);
|
||||
this.setState({
|
||||
cursor: [
|
||||
coords[0].toFixed(2),
|
||||
coords[1].toFixed(2)
|
||||
]
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
const onMoveEnd = () => {
|
||||
const zoom = map.getView().getZoom();
|
||||
@@ -122,12 +122,12 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
|
||||
lat: center[1],
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMoveEnd();
|
||||
map.on('moveend', onMoveEnd);
|
||||
map.on("moveend", onMoveEnd);
|
||||
|
||||
map.on('postrender', (_e) => {
|
||||
map.on("postrender", (_e) => {
|
||||
const center = toLonLat(map.getView().getCenter()!);
|
||||
this.setState({
|
||||
center: [
|
||||
@@ -150,13 +150,13 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
|
||||
closeOverlay = (e: any) => {
|
||||
e.target.blur();
|
||||
this.overlay!.setPosition(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <div className="maputnik-ol-container">
|
||||
<div
|
||||
ref={x => {this.popupContainer = x}}
|
||||
ref={x => {this.popupContainer = x;}}
|
||||
style={{background: "black"}}
|
||||
className="maputnik-popup"
|
||||
>
|
||||
@@ -193,14 +193,14 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
|
||||
}
|
||||
<div
|
||||
className="maputnik-ol"
|
||||
ref={x => {this.container = x}}
|
||||
ref={x => {this.container = x;}}
|
||||
role="region"
|
||||
aria-label={t("Map view")}
|
||||
style={{
|
||||
...this.props.style,
|
||||
}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import FieldFunction from './FieldFunction'
|
||||
import type {LayerSpecification} from 'maplibre-gl'
|
||||
import FieldFunction from "./FieldFunction";
|
||||
import type {LayerSpecification} from "maplibre-gl";
|
||||
|
||||
const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
|
||||
const iconProperties = ["background-pattern", "fill-pattern", "line-pattern", "fill-extrusion-pattern", "icon-image"];
|
||||
|
||||
/** Extract field spec by {@fieldName} from the {@layerType} in the
|
||||
* style specification from either the paint or layout group */
|
||||
function getFieldSpec(spec: any, layerType: LayerSpecification["type"], fieldName: string) {
|
||||
const groupName = getGroupName(spec, layerType, fieldName)
|
||||
const group = spec[groupName + '_' + layerType]
|
||||
const fieldSpec = group[fieldName]
|
||||
const groupName = getGroupName(spec, layerType, fieldName);
|
||||
const group = spec[groupName + "_" + layerType];
|
||||
const fieldSpec = group[fieldName];
|
||||
if(iconProperties.indexOf(fieldName) >= 0) {
|
||||
return {
|
||||
...fieldSpec,
|
||||
values: spec.$root.sprite.values
|
||||
};
|
||||
}
|
||||
}
|
||||
if(fieldName === 'text-font') {
|
||||
if(fieldName === "text-font") {
|
||||
return {
|
||||
...fieldSpec,
|
||||
values: spec.$root.glyphs.values
|
||||
};
|
||||
}
|
||||
}
|
||||
return fieldSpec
|
||||
return fieldSpec;
|
||||
}
|
||||
|
||||
function getGroupName(spec: any, layerType: LayerSpecification["type"], fieldName: string): 'paint' | 'layout' {
|
||||
const paint = spec['paint_' + layerType] || {}
|
||||
return (fieldName in paint) ? 'paint' : 'layout';
|
||||
function getGroupName(spec: any, layerType: LayerSpecification["type"], fieldName: string): "paint" | "layout" {
|
||||
const paint = spec["paint_" + layerType] || {};
|
||||
return (fieldName in paint) ? "paint" : "layout";
|
||||
}
|
||||
|
||||
type PropertyGroupProps = {
|
||||
@@ -41,21 +41,21 @@ type PropertyGroupProps = {
|
||||
|
||||
export default class PropertyGroup extends React.Component<PropertyGroupProps> {
|
||||
onPropertyChange = (property: string, newValue: any) => {
|
||||
const group = getGroupName(this.props.spec, this.props.layer.type, property)
|
||||
this.props.onChange(group ,property, newValue)
|
||||
}
|
||||
const group = getGroupName(this.props.spec, this.props.layer.type, property);
|
||||
this.props.onChange(group ,property, newValue);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {errors} = this.props;
|
||||
const fields = this.props.groupFields.map(fieldName => {
|
||||
const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
|
||||
const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName);
|
||||
|
||||
const paint = this.props.layer.paint || {}
|
||||
const layout = this.props.layer.layout || {}
|
||||
const paint = this.props.layer.paint || {};
|
||||
const layout = this.props.layer.layout || {};
|
||||
const fieldValue = fieldName in paint
|
||||
? paint[fieldName as keyof typeof paint]
|
||||
: layout[fieldName as keyof typeof layout]
|
||||
const fieldType = fieldName in paint ? 'paint' : 'layout';
|
||||
: layout[fieldName as keyof typeof layout];
|
||||
const fieldType = fieldName in paint ? "paint" : "layout";
|
||||
|
||||
return <FieldFunction
|
||||
errors={errors}
|
||||
@@ -65,11 +65,11 @@ export default class PropertyGroup extends React.Component<PropertyGroupProps> {
|
||||
value={fieldValue}
|
||||
fieldType={fieldType}
|
||||
fieldSpec={fieldSpec}
|
||||
/>
|
||||
})
|
||||
/>;
|
||||
});
|
||||
|
||||
return <div className="maputnik-property-group">
|
||||
{fields}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
type ScrollContainerProps = {
|
||||
children?: React.ReactNode
|
||||
@@ -8,6 +8,6 @@ export default class ScrollContainer extends React.Component<ScrollContainerProp
|
||||
render() {
|
||||
return <div className="maputnik-scroll-container">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import {otherFilterOps} from '../libs/filterops'
|
||||
import InputString from './InputString'
|
||||
import InputAutocomplete from './InputAutocomplete'
|
||||
import InputSelect from './InputSelect'
|
||||
import {otherFilterOps} from "../libs/filterops";
|
||||
import InputString from "./InputString";
|
||||
import InputAutocomplete from "./InputAutocomplete";
|
||||
import InputSelect from "./InputSelect";
|
||||
|
||||
function tryParseInt(v: string | number) {
|
||||
if (v === '') return v
|
||||
if (isNaN(v as number)) return v
|
||||
return parseFloat(v as string)
|
||||
if (v === "") return v;
|
||||
if (isNaN(v as number)) return v;
|
||||
return parseFloat(v as string);
|
||||
}
|
||||
|
||||
function tryParseBool(v: string | boolean) {
|
||||
@@ -43,23 +43,23 @@ type SingleFilterEditorProps = {
|
||||
export default class SingleFilterEditor extends React.Component<SingleFilterEditorProps> {
|
||||
static defaultProps = {
|
||||
properties: {},
|
||||
}
|
||||
};
|
||||
|
||||
onFilterPartChanged(filterOp: string, propertyName: string, filterArgs: string[]) {
|
||||
let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)]
|
||||
if(filterOp === 'has' || filterOp === '!has') {
|
||||
newFilter = [filterOp, propertyName]
|
||||
let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)];
|
||||
if(filterOp === "has" || filterOp === "!has") {
|
||||
newFilter = [filterOp, propertyName];
|
||||
} else if(filterArgs.length === 0) {
|
||||
newFilter = [filterOp, propertyName, '']
|
||||
newFilter = [filterOp, propertyName, ""];
|
||||
}
|
||||
this.props.onChange(newFilter)
|
||||
this.props.onChange(newFilter);
|
||||
}
|
||||
|
||||
render() {
|
||||
const f = this.props.filter
|
||||
const filterOp = f[0]
|
||||
const propertyName = f[1]
|
||||
const filterArgs = f.slice(2)
|
||||
const f = this.props.filter;
|
||||
const filterOp = f[0];
|
||||
const propertyName = f[1];
|
||||
const filterArgs = f.slice(2);
|
||||
|
||||
return <div className="maputnik-filter-editor-single">
|
||||
<div className="maputnik-filter-editor-property">
|
||||
@@ -82,11 +82,11 @@ export default class SingleFilterEditor extends React.Component<SingleFilterEdit
|
||||
<div className="maputnik-filter-editor-args">
|
||||
<InputString
|
||||
aria-label="value"
|
||||
value={filterArgs.join(',')}
|
||||
onChange={(v: string) => this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
|
||||
value={filterArgs.join(",")}
|
||||
onChange={(v: string) => this.onFilterPartChanged(filterOp, propertyName, v.split(","))}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import './SmallError.scss';
|
||||
import React from "react";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import "./SmallError.scss";
|
||||
|
||||
|
||||
type SmallErrorInternalProps = {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import React from 'react'
|
||||
import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import React from "react";
|
||||
import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
|
||||
import InputButton from './InputButton'
|
||||
import InputSpec from './InputSpec'
|
||||
import InputNumber from './InputNumber'
|
||||
import InputString from './InputString'
|
||||
import InputSelect from './InputSelect'
|
||||
import Block from './Block'
|
||||
import docUid from '../libs/document-uid'
|
||||
import sortNumerically from '../libs/sort-numerically'
|
||||
import {findDefaultFromSpec} from '../libs/spec-helper';
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import InputButton from "./InputButton";
|
||||
import InputSpec from "./InputSpec";
|
||||
import InputNumber from "./InputNumber";
|
||||
import InputString from "./InputString";
|
||||
import InputSelect from "./InputSelect";
|
||||
import Block from "./Block";
|
||||
import docUid from "../libs/document-uid";
|
||||
import sortNumerically from "../libs/sort-numerically";
|
||||
import {findDefaultFromSpec} from "../libs/spec-helper";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import labelFromFieldName from '../libs/label-from-field-name'
|
||||
import DeleteStopButton from './_DeleteStopButton'
|
||||
import labelFromFieldName from "../libs/label-from-field-name";
|
||||
import DeleteStopButton from "./_DeleteStopButton";
|
||||
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ function setStopRefs(props: DataPropertyInternalProps, state: DataPropertyState)
|
||||
}
|
||||
newRefs[idx] = docUid("stop-");
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
return newRefs;
|
||||
@@ -59,17 +59,17 @@ type DataPropertyValue = {
|
||||
base?: number
|
||||
type?: string
|
||||
stops: Stop[]
|
||||
}
|
||||
};
|
||||
|
||||
export type Stop = [{
|
||||
zoom: number
|
||||
value: number
|
||||
}, number]
|
||||
}, number];
|
||||
|
||||
class DataPropertyInternal extends React.Component<DataPropertyInternalProps, DataPropertyState> {
|
||||
state = {
|
||||
refs: {} as {[key: number]: string}
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const newRefs = setStopRefs(this.props, this.state);
|
||||
@@ -77,7 +77,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
if(newRefs) {
|
||||
this.setState({
|
||||
refs: newRefs
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,20 +93,20 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
|
||||
getFieldFunctionType(fieldSpec: any) {
|
||||
if (fieldSpec.expression.interpolated) {
|
||||
return "exponential"
|
||||
return "exponential";
|
||||
}
|
||||
if (fieldSpec.type === "number") {
|
||||
return "interval"
|
||||
return "interval";
|
||||
}
|
||||
return "categorical"
|
||||
return "categorical";
|
||||
}
|
||||
|
||||
getDataFunctionTypes(fieldSpec: any) {
|
||||
if (fieldSpec.expression.interpolated) {
|
||||
return ["interpolate", "categorical", "interval", "exponential", "identity"]
|
||||
return ["interpolate", "categorical", "interval", "exponential", "identity"];
|
||||
}
|
||||
else {
|
||||
return ["categorical", "interval", "identity"]
|
||||
return ["categorical", "interval", "identity"];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,7 +117,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
return {
|
||||
ref: this.state.refs[idx],
|
||||
data: stop
|
||||
}
|
||||
};
|
||||
})
|
||||
// Sort by zoom
|
||||
.sort((a, b) => sortNumerically(a.data[0].zoom, b.data[0].zoom));
|
||||
@@ -127,7 +127,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
mappedWithRef
|
||||
.forEach((stop, idx) =>{
|
||||
newRefs[idx] = stop.ref;
|
||||
})
|
||||
});
|
||||
|
||||
this.setState({
|
||||
refs: newRefs
|
||||
@@ -144,7 +144,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
};
|
||||
}
|
||||
else {
|
||||
const stopValue = value.type === 'categorical' ? '' : 0;
|
||||
const stopValue = value.type === "categorical" ? "" : 0;
|
||||
value = {
|
||||
property: "",
|
||||
type: value.type,
|
||||
@@ -154,13 +154,13 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
[{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec as any)]
|
||||
],
|
||||
...value,
|
||||
}
|
||||
};
|
||||
}
|
||||
this.props.onChange!(fieldName, value);
|
||||
}
|
||||
};
|
||||
|
||||
changeStop(changeIdx: number, stopData: { zoom: number | undefined, value: number }, value: number) {
|
||||
const stops = this.props.value?.stops.slice(0) || []
|
||||
const stops = this.props.value?.stops.slice(0) || [];
|
||||
// const changedStop = stopData.zoom === undefined ? stopData.value : stopData
|
||||
stops[changeIdx] = [
|
||||
{
|
||||
@@ -175,20 +175,20 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
const changedValue = {
|
||||
...this.props.value,
|
||||
stops: orderedStops,
|
||||
}
|
||||
this.onChange(this.props.fieldName, changedValue)
|
||||
};
|
||||
this.onChange(this.props.fieldName, changedValue);
|
||||
}
|
||||
|
||||
changeBase(newValue: number | undefined) {
|
||||
const changedValue = {
|
||||
...this.props.value,
|
||||
base: newValue
|
||||
}
|
||||
};
|
||||
|
||||
if (changedValue.base === undefined) {
|
||||
delete changedValue["base"];
|
||||
}
|
||||
this.props.onChange!(this.props.fieldName, changedValue)
|
||||
this.props.onChange!(this.props.fieldName, changedValue);
|
||||
}
|
||||
|
||||
changeDataType(propVal: string) {
|
||||
@@ -205,43 +205,43 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
|
||||
changeDataProperty(propName: "property" | "default", propVal: any) {
|
||||
if (propVal) {
|
||||
this.props.value![propName] = propVal
|
||||
this.props.value![propName] = propVal;
|
||||
}
|
||||
else {
|
||||
delete this.props.value![propName]
|
||||
delete this.props.value![propName];
|
||||
}
|
||||
this.onChange(this.props.fieldName, this.props.value)
|
||||
this.onChange(this.props.fieldName, this.props.value);
|
||||
}
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
|
||||
if (typeof this.props.value?.type === "undefined") {
|
||||
this.props.value!.type = this.getFieldFunctionType(this.props.fieldSpec)
|
||||
this.props.value!.type = this.getFieldFunctionType(this.props.fieldSpec);
|
||||
}
|
||||
|
||||
let dataFields;
|
||||
if (this.props.value?.stops) {
|
||||
dataFields = this.props.value.stops.map((stop, idx) => {
|
||||
const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
|
||||
const zoomLevel = typeof stop[0] === "object" ? stop[0].zoom : undefined;
|
||||
const key = this.state.refs[idx];
|
||||
const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
|
||||
const value = stop[1]
|
||||
const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />
|
||||
const dataLevel = typeof stop[0] === "object" ? stop[0].value : stop[0];
|
||||
const value = stop[1];
|
||||
const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />;
|
||||
|
||||
const dataProps = {
|
||||
'aria-label': t("Input value"),
|
||||
"aria-label": t("Input value"),
|
||||
label: t("Data value"),
|
||||
value: dataLevel as any,
|
||||
onChange: (newData: string | number | undefined) => this.changeStop(idx, { zoom: zoomLevel, value: newData as number }, value)
|
||||
}
|
||||
};
|
||||
|
||||
let dataInput;
|
||||
if(this.props.value?.type === "categorical") {
|
||||
dataInput = <InputString {...dataProps} />
|
||||
dataInput = <InputString {...dataProps} />;
|
||||
}
|
||||
else {
|
||||
dataInput = <InputNumber {...dataProps} />
|
||||
dataInput = <InputNumber {...dataProps} />;
|
||||
}
|
||||
|
||||
let zoomInput = null;
|
||||
@@ -254,7 +254,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
min={0}
|
||||
max={22}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
return <tr key={key}>
|
||||
@@ -276,8 +276,8 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
<td>
|
||||
{deleteStopBtn}
|
||||
</td>
|
||||
</tr>
|
||||
})
|
||||
</tr>;
|
||||
});
|
||||
}
|
||||
|
||||
return <div className="maputnik-data-spec-block">
|
||||
@@ -376,7 +376,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import InputButton from './InputButton'
|
||||
import {MdDelete} from 'react-icons/md'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import InputButton from "./InputButton";
|
||||
import {MdDelete} from "react-icons/md";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
|
||||
type DeleteStopButtonInternalProps = {
|
||||
@@ -19,7 +19,7 @@ class DeleteStopButtonInternal extends React.Component<DeleteStopButtonInternalP
|
||||
title={t("Remove zoom level from stop")}
|
||||
>
|
||||
<MdDelete />
|
||||
</InputButton>
|
||||
</InputButton>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React from 'react'
|
||||
import {MdDelete, MdUndo} from 'react-icons/md'
|
||||
import stringifyPretty from 'json-stringify-pretty-compact'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import {MdDelete, MdUndo} from "react-icons/md";
|
||||
import stringifyPretty from "json-stringify-pretty-compact";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import Block from './Block'
|
||||
import InputButton from './InputButton'
|
||||
import labelFromFieldName from '../libs/label-from-field-name'
|
||||
import FieldJson from './FieldJson'
|
||||
import Block from "./Block";
|
||||
import InputButton from "./InputButton";
|
||||
import labelFromFieldName from "../libs/label-from-field-name";
|
||||
import FieldJson from "./FieldJson";
|
||||
|
||||
|
||||
type ExpressionPropertyInternalProps = {
|
||||
@@ -32,7 +32,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
|
||||
errors: {},
|
||||
onFocus: () => {},
|
||||
onBlur: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props: ExpressionPropertyInternalProps) {
|
||||
super(props);
|
||||
@@ -44,14 +44,14 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
|
||||
onJSONInvalid = (_err: Error) => {
|
||||
this.setState({
|
||||
jsonError: true,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onJSONValid = () => {
|
||||
this.setState({
|
||||
jsonError: false,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {t, errors, fieldName, fieldType, value, canUndo} = this.props;
|
||||
@@ -89,7 +89,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
|
||||
const foundErrors = [];
|
||||
|
||||
function getValue(data: any) {
|
||||
return stringifyPretty(data, {indent: 2, maxLength: 38})
|
||||
return stringifyPretty(data, {indent: 2, maxLength: 38});
|
||||
}
|
||||
|
||||
if (jsonError) {
|
||||
@@ -102,7 +102,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
|
||||
})
|
||||
.forEach(([_key, error]) => {
|
||||
return foundErrors.push(error);
|
||||
})
|
||||
});
|
||||
|
||||
if (fieldError) {
|
||||
foundErrors.push(fieldError);
|
||||
@@ -135,7 +135,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
|
||||
getValue={getValue}
|
||||
onChange={this.props.onChange}
|
||||
/>
|
||||
</Block>
|
||||
</Block>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import InputButton from './InputButton'
|
||||
import {MdFunctions, MdInsertChart} from 'react-icons/md'
|
||||
import {mdiFunctionVariant} from '@mdi/js';
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import InputButton from "./InputButton";
|
||||
import {MdFunctions, MdInsertChart} from "react-icons/md";
|
||||
import {mdiFunctionVariant} from "@mdi/js";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type FunctionInputButtonsInternalProps = {
|
||||
fieldSpec?: any
|
||||
@@ -17,7 +17,7 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
|
||||
if (this.props.fieldSpec.expression?.parameters.includes('zoom')) {
|
||||
if (this.props.fieldSpec.expression?.parameters.includes("zoom")) {
|
||||
const expressionInputButton = (
|
||||
<InputButton
|
||||
className="maputnik-make-zoom-function"
|
||||
@@ -36,24 +36,24 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
|
||||
title={t("Convert property into a zoom function")}
|
||||
>
|
||||
<MdFunctions />
|
||||
</InputButton>
|
||||
</InputButton>;
|
||||
|
||||
let makeDataInputButton;
|
||||
if (this.props.fieldSpec['property-type'] === 'data-driven') {
|
||||
if (this.props.fieldSpec["property-type"] === "data-driven") {
|
||||
makeDataInputButton = <InputButton
|
||||
className="maputnik-make-data-function"
|
||||
onClick={this.props.onDataClick}
|
||||
title={t("Convert property to data function")}
|
||||
>
|
||||
<MdInsertChart />
|
||||
</InputButton>
|
||||
</InputButton>;
|
||||
}
|
||||
return <div>
|
||||
{expressionInputButton}
|
||||
{makeDataInputButton}
|
||||
{makeZoomInputButton}
|
||||
</div>
|
||||
} else if (this.props.fieldSpec.expression?.parameters.includes('elevation')) {
|
||||
</div>;
|
||||
} else if (this.props.fieldSpec.expression?.parameters.includes("elevation")) {
|
||||
const inputElevationButton = <InputButton
|
||||
className="maputnik-make-elevation-function"
|
||||
onClick={this.props.onElevationClick}
|
||||
@@ -61,10 +61,10 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
|
||||
data-wd-key='make-elevation-function'
|
||||
>
|
||||
<MdFunctions />
|
||||
</InputButton>
|
||||
return <div>{inputElevationButton}</div>
|
||||
</InputButton>;
|
||||
return <div>{inputElevationButton}</div>;
|
||||
} else {
|
||||
return <div></div>
|
||||
return <div></div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import FieldSpec, {FieldSpecProps} from './FieldSpec'
|
||||
import FunctionButtons from './_FunctionButtons'
|
||||
import FieldSpec, {type FieldSpecProps} from "./FieldSpec";
|
||||
import FunctionButtons from "./_FunctionButtons";
|
||||
|
||||
import labelFromFieldName from '../libs/label-from-field-name'
|
||||
import labelFromFieldName from "../libs/label-from-field-name";
|
||||
|
||||
|
||||
type SpecPropertyProps = FieldSpecProps & {
|
||||
@@ -22,7 +22,7 @@ type SpecPropertyProps = FieldSpecProps & {
|
||||
export default class SpecProperty extends React.Component<SpecPropertyProps> {
|
||||
static defaultProps = {
|
||||
errors: {},
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {errors, fieldName, fieldType} = this.props;
|
||||
@@ -33,7 +33,7 @@ export default class SpecProperty extends React.Component<SpecPropertyProps> {
|
||||
onDataClick={this.props.onDataClick}
|
||||
onExpressionClick={this.props.onExpressionClick}
|
||||
onElevationClick={this.props.onElevationClick}
|
||||
/>
|
||||
/>;
|
||||
|
||||
const error = errors![fieldType+"."+fieldName as any] as any;
|
||||
|
||||
@@ -41,8 +41,8 @@ export default class SpecProperty extends React.Component<SpecPropertyProps> {
|
||||
{...this.props}
|
||||
error={error}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
label={labelFromFieldName(this.props.fieldName || '')}
|
||||
label={labelFromFieldName(this.props.fieldName || "")}
|
||||
action={functionBtn}
|
||||
/>
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import React from 'react'
|
||||
import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import InputButton from './InputButton'
|
||||
import InputSpec from './InputSpec'
|
||||
import InputNumber from './InputNumber'
|
||||
import InputSelect from './InputSelect'
|
||||
import Block from './Block'
|
||||
import InputButton from "./InputButton";
|
||||
import InputSpec from "./InputSpec";
|
||||
import InputNumber from "./InputNumber";
|
||||
import InputSelect from "./InputSelect";
|
||||
import Block from "./Block";
|
||||
|
||||
import DeleteStopButton from './_DeleteStopButton'
|
||||
import labelFromFieldName from '../libs/label-from-field-name'
|
||||
import DeleteStopButton from "./_DeleteStopButton";
|
||||
import labelFromFieldName from "../libs/label-from-field-name";
|
||||
|
||||
import docUid from '../libs/document-uid'
|
||||
import sortNumerically from '../libs/sort-numerically'
|
||||
import docUid from "../libs/document-uid";
|
||||
import sortNumerically from "../libs/sort-numerically";
|
||||
|
||||
|
||||
/**
|
||||
@@ -35,7 +35,7 @@ function setStopRefs(props: ZoomPropertyInternalProps, state: ZoomPropertyState)
|
||||
} else {
|
||||
newRefs[idx] = state.refs[idx];
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
return newRefs;
|
||||
}
|
||||
@@ -43,7 +43,7 @@ function setStopRefs(props: ZoomPropertyInternalProps, state: ZoomPropertyState)
|
||||
type ZoomWithStops = {
|
||||
stops: [number | undefined, number][]
|
||||
base?: number
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
type ZoomPropertyInternalProps = {
|
||||
@@ -64,16 +64,16 @@ type ZoomPropertyInternalProps = {
|
||||
|
||||
type ZoomPropertyState = {
|
||||
refs: {[key: number]: string}
|
||||
}
|
||||
};
|
||||
|
||||
class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, ZoomPropertyState> {
|
||||
static defaultProps = {
|
||||
errors: {},
|
||||
}
|
||||
};
|
||||
|
||||
state = {
|
||||
refs: {} as {[key: number]: string}
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const newRefs = setStopRefs(this.props, this.state);
|
||||
@@ -81,7 +81,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
|
||||
if(newRefs) {
|
||||
this.setState({
|
||||
refs: newRefs
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
|
||||
return {
|
||||
ref: this.state.refs[idx],
|
||||
data: stop
|
||||
}
|
||||
};
|
||||
})
|
||||
// Sort by zoom
|
||||
.sort((a, b) => sortNumerically(a.data[0]!, b.data[0]!));
|
||||
@@ -112,7 +112,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
|
||||
mappedWithRef
|
||||
.forEach((stop, idx) =>{
|
||||
newRefs[idx] = stop.ref;
|
||||
})
|
||||
});
|
||||
|
||||
this.setState({
|
||||
refs: newRefs
|
||||
@@ -130,34 +130,34 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
|
||||
const changedValue = {
|
||||
...this.props.value as ZoomWithStops,
|
||||
stops: orderedStops
|
||||
}
|
||||
this.props.onChange!(this.props.fieldName, changedValue)
|
||||
};
|
||||
this.props.onChange!(this.props.fieldName, changedValue);
|
||||
}
|
||||
|
||||
changeBase(newValue: number | undefined) {
|
||||
const changedValue = {
|
||||
...this.props.value,
|
||||
base: newValue
|
||||
}
|
||||
};
|
||||
|
||||
if (changedValue.base === undefined) {
|
||||
delete changedValue["base"];
|
||||
}
|
||||
this.props.onChange!(this.props.fieldName, changedValue)
|
||||
this.props.onChange!(this.props.fieldName, changedValue);
|
||||
}
|
||||
|
||||
changeDataType = (type: string) => {
|
||||
if (type !== "interpolate" && this.props.onChangeToDataFunction) {
|
||||
this.props.onChangeToDataFunction(type);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
const zoomFields = this.props.value?.stops.map((stop, idx) => {
|
||||
const zoomLevel = stop[0]
|
||||
const value = stop[1]
|
||||
const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />
|
||||
const zoomLevel = stop[0];
|
||||
const value = stop[1];
|
||||
const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />;
|
||||
return <tr
|
||||
key={`${stop[0]}-${stop[1]}`}
|
||||
>
|
||||
@@ -182,7 +182,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
|
||||
<td>
|
||||
{deleteStopBtn}
|
||||
</td>
|
||||
</tr>
|
||||
</tr>;
|
||||
});
|
||||
|
||||
// return <div className="maputnik-zoom-spec-property">
|
||||
@@ -248,14 +248,14 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
getDataFunctionTypes(fieldSpec: {
|
||||
"property-type"?: string
|
||||
"function-type"?: string
|
||||
}) {
|
||||
if (fieldSpec['property-type'] === 'data-driven') {
|
||||
if (fieldSpec["property-type"] === "data-driven") {
|
||||
return ["interpolate", "categorical", "interval", "exponential", "identity"];
|
||||
}
|
||||
else {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { PropsWithChildren } from 'react'
|
||||
import {MdClose} from 'react-icons/md'
|
||||
import AriaModal from 'react-aria-modal'
|
||||
import classnames from 'classnames';
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React, { type PropsWithChildren } from "react";
|
||||
import {MdClose} from "react-icons/md";
|
||||
import AriaModal from "react-aria-modal";
|
||||
import classnames from "classnames";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
type ModalInternalProps = PropsWithChildren & {
|
||||
"data-wd-key"?: string
|
||||
@@ -17,7 +17,7 @@ type ModalInternalProps = PropsWithChildren & {
|
||||
class ModalInternal extends React.Component<ModalInternalProps> {
|
||||
static defaultProps = {
|
||||
underlayClickExits: true
|
||||
}
|
||||
};
|
||||
|
||||
// See <https://github.com/maplibre/maputnik/issues/416>
|
||||
onClose = () => {
|
||||
@@ -28,7 +28,7 @@ class ModalInternal extends React.Component<ModalInternalProps> {
|
||||
setTimeout(() => {
|
||||
this.props.onOpenToggle(false);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
@@ -59,7 +59,7 @@ class ModalInternal extends React.Component<ModalInternalProps> {
|
||||
<div className="maputnik-modal-content">{this.props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</AriaModal>
|
||||
</AriaModal>;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
|
||||
import React from "react";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import type {LayerSpecification, SourceSpecification} from "maplibre-gl";
|
||||
|
||||
import InputButton from '../InputButton'
|
||||
import Modal from './Modal'
|
||||
import FieldType from '../FieldType'
|
||||
import FieldId from '../FieldId'
|
||||
import FieldSource from '../FieldSource'
|
||||
import FieldSourceLayer from '../FieldSourceLayer'
|
||||
import { NON_SOURCE_LAYERS } from '../../libs/non-source-layers'
|
||||
import InputButton from "../InputButton";
|
||||
import Modal from "./Modal";
|
||||
import FieldType from "../FieldType";
|
||||
import FieldId from "../FieldId";
|
||||
import FieldSource from "../FieldSource";
|
||||
import FieldSourceLayer from "../FieldSourceLayer";
|
||||
import { NON_SOURCE_LAYERS } from "../../libs/non-source-layers";
|
||||
|
||||
type ModalAddInternalProps = {
|
||||
layers: LayerSpecification[]
|
||||
@@ -23,50 +23,50 @@ type ModalAddState = {
|
||||
type: LayerSpecification["type"]
|
||||
id: string
|
||||
source?: string
|
||||
'source-layer'?: 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
|
||||
this.setState({ error: this.props.t("Layer ID already exists") });
|
||||
return;
|
||||
}
|
||||
|
||||
const changedLayers = this.props.layers.slice(0)
|
||||
const changedLayers = this.props.layers.slice(0);
|
||||
const layer: ModalAddState = {
|
||||
id: this.state.id,
|
||||
type: this.state.type,
|
||||
}
|
||||
};
|
||||
|
||||
if(this.state.type !== 'background') {
|
||||
layer.source = this.state.source
|
||||
if(!NON_SOURCE_LAYERS.includes(this.state.type) && this.state['source-layer']) {
|
||||
layer['source-layer'] = this.state['source-layer']
|
||||
if(this.state.type !== "background") {
|
||||
layer.source = this.state.source;
|
||||
if(!NON_SOURCE_LAYERS.includes(this.state.type) && this.state["source-layer"]) {
|
||||
layer["source-layer"] = this.state["source-layer"];
|
||||
}
|
||||
}
|
||||
|
||||
changedLayers.push(layer as LayerSpecification)
|
||||
changedLayers.push(layer as LayerSpecification);
|
||||
this.setState({ error: null }, () => {
|
||||
this.props.onLayersChange(changedLayers)
|
||||
this.props.onOpenToggle(false)
|
||||
})
|
||||
}
|
||||
this.props.onLayersChange(changedLayers);
|
||||
this.props.onOpenToggle(false);
|
||||
});
|
||||
};
|
||||
|
||||
constructor(props: ModalAddInternalProps) {
|
||||
super(props)
|
||||
super(props);
|
||||
const state: ModalAddState = {
|
||||
type: 'fill',
|
||||
id: '',
|
||||
type: "fill",
|
||||
id: "",
|
||||
error: null,
|
||||
}
|
||||
};
|
||||
|
||||
if(Object.keys(props.sources).length > 0) {
|
||||
state.source = Object.keys(this.props.sources)[0];
|
||||
const sourceLayers = this.props.sources[state.source].layers || []
|
||||
const sourceLayers = this.props.sources[state.source].layers || [];
|
||||
if (sourceLayers.length > 0) {
|
||||
state['source-layer'] = sourceLayers[0];
|
||||
state["source-layer"] = sourceLayers[0];
|
||||
}
|
||||
}
|
||||
this.state = state;
|
||||
@@ -104,20 +104,20 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
getSources(type: LayerSpecification["type"]) {
|
||||
|
||||
switch(type) {
|
||||
case 'background':
|
||||
case "background":
|
||||
return [];
|
||||
case 'hillshade':
|
||||
case 'color-relief':
|
||||
return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'raster-dem').map(([k, _]) => k);
|
||||
case 'raster':
|
||||
return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'raster').map(([k, _]) => k);
|
||||
case 'heatmap':
|
||||
case 'circle':
|
||||
case 'fill':
|
||||
case 'fill-extrusion':
|
||||
case 'line':
|
||||
case 'symbol':
|
||||
return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'vector' || v.type === 'geojson').map(([k, _]) => k);
|
||||
case "hillshade":
|
||||
case "color-relief":
|
||||
return Object.entries(this.props.sources).filter(([_, v]) => v.type === "raster-dem").map(([k, _]) => k);
|
||||
case "raster":
|
||||
return Object.entries(this.props.sources).filter(([_, v]) => v.type === "raster").map(([k, _]) => k);
|
||||
case "heatmap":
|
||||
case "circle":
|
||||
case "fill":
|
||||
case "fill-extrusion":
|
||||
case "line":
|
||||
case "symbol":
|
||||
return Object.entries(this.props.sources).filter(([_, v]) => v.type === "vector" || v.type === "geojson").map(([k, _]) => k);
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
@@ -147,7 +147,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
return <Modal
|
||||
isOpen={this.props.isOpen}
|
||||
onOpenToggle={this.props.onOpenToggle}
|
||||
title={t('Add Layer')}
|
||||
title={t("Add Layer")}
|
||||
data-wd-key="modal:add-layer"
|
||||
className="maputnik-add-modal"
|
||||
>
|
||||
@@ -157,7 +157,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
value={this.state.id}
|
||||
wdKey="add-layer.layer-id"
|
||||
onChange={(v: string) => {
|
||||
this.setState({ id: v, error: null })
|
||||
this.setState({ id: v, error: null });
|
||||
}}
|
||||
/>
|
||||
<FieldType
|
||||
@@ -165,7 +165,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
wdKey="add-layer.layer-type"
|
||||
onChange={(v: LayerSpecification["type"]) => this.setState({ type: v })}
|
||||
/>
|
||||
{this.state.type !== 'background' &&
|
||||
{this.state.type !== "background" &&
|
||||
<FieldSource
|
||||
sourceIds={sources}
|
||||
wdKey="add-layer.layer-source-block"
|
||||
@@ -176,8 +176,8 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
{!NON_SOURCE_LAYERS.includes(this.state.type) &&
|
||||
<FieldSourceLayer
|
||||
sourceLayerIds={layers}
|
||||
value={this.state['source-layer']}
|
||||
onChange={(v: string) => this.setState({ 'source-layer': v })}
|
||||
value={this.state["source-layer"]}
|
||||
onChange={(v: string) => this.setState({ "source-layer": v })}
|
||||
/>
|
||||
}
|
||||
<InputButton
|
||||
@@ -188,7 +188,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
|
||||
{t("Add Layer")}
|
||||
</InputButton>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import Modal from './Modal'
|
||||
import Modal from "./Modal";
|
||||
|
||||
|
||||
type ModalDebugInternalProps = {
|
||||
@@ -34,29 +34,29 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
|
||||
data-wd-key="modal:debug"
|
||||
isOpen={this.props.isOpen}
|
||||
onOpenToggle={this.props.onOpenToggle}
|
||||
title={t('Debug')}
|
||||
title={t("Debug")}
|
||||
>
|
||||
<section className="maputnik-modal-section maputnik-modal-shortcuts">
|
||||
<h1>{t("Options")}</h1>
|
||||
{this.props.renderer === 'mlgljs' &&
|
||||
{this.props.renderer === "mlgljs" &&
|
||||
<ul>
|
||||
{Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
|
||||
return <li key={key}>
|
||||
<label>
|
||||
<input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaplibreGlDebug(key, e.target.checked)} /> {key}
|
||||
</label>
|
||||
</li>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
}
|
||||
{this.props.renderer === 'ol' &&
|
||||
{this.props.renderer === "ol" &&
|
||||
<ul>
|
||||
{Object.entries(this.props.openlayersDebugOptions!).map(([key, val]) => {
|
||||
return <li key={key}>
|
||||
<label>
|
||||
<input type="checkbox" checked={val} onChange={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
|
||||
</label>
|
||||
</li>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
}
|
||||
@@ -75,7 +75,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
|
||||
</Trans>
|
||||
</p>
|
||||
</section>
|
||||
</Modal>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import React from 'react'
|
||||
import Slugify from 'slugify'
|
||||
import {saveAs} from 'file-saver'
|
||||
import {version} from 'maplibre-gl/package.json'
|
||||
import {format} from '@maplibre/maplibre-gl-style-spec'
|
||||
import {MdMap, MdSave} from 'react-icons/md'
|
||||
import {WithTranslation, withTranslation} from 'react-i18next';
|
||||
import React from "react";
|
||||
import Slugify from "slugify";
|
||||
import {saveAs} from "file-saver";
|
||||
import {version} from "maplibre-gl/package.json";
|
||||
import {format} from "@maplibre/maplibre-gl-style-spec";
|
||||
import {MdMap, MdSave} from "react-icons/md";
|
||||
import {type WithTranslation, withTranslation} from "react-i18next";
|
||||
|
||||
import FieldString from '../FieldString'
|
||||
import InputButton from '../InputButton'
|
||||
import Modal from './Modal'
|
||||
import style from '../../libs/style'
|
||||
import fieldSpecAdditional from '../../libs/field-spec-additional'
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions'
|
||||
import FieldString from "../FieldString";
|
||||
import InputButton from "../InputButton";
|
||||
import Modal from "./Modal";
|
||||
import style from "../../libs/style";
|
||||
import fieldSpecAdditional from "../../libs/field-spec-additional";
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";
|
||||
|
||||
|
||||
const MAPLIBRE_GL_VERSION = version;
|
||||
@@ -41,12 +41,12 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
exportName() {
|
||||
if (this.props.mapStyle.name) {
|
||||
return Slugify(this.props.mapStyle.name, {
|
||||
replacement: '_',
|
||||
replacement: "_",
|
||||
remove: /[*\-+~.()'"!:]/g,
|
||||
lower: true
|
||||
});
|
||||
} else {
|
||||
return this.props.mapStyle.id
|
||||
return this.props.mapStyle.id;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
let fileHandle = this.props.fileHandle;
|
||||
if (fileHandle == null) {
|
||||
fileHandle = await this.createFileHandle();
|
||||
this.props.onSetFileHandle(fileHandle)
|
||||
this.props.onSetFileHandle(fileHandle);
|
||||
if (fileHandle == null) return;
|
||||
}
|
||||
|
||||
@@ -113,7 +113,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
const tokenStyle = this.tokenizedStyle();
|
||||
|
||||
const fileHandle = await this.createFileHandle();
|
||||
this.props.onSetFileHandle(fileHandle)
|
||||
this.props.onSetFileHandle(fileHandle);
|
||||
if (fileHandle == null) return;
|
||||
|
||||
const writable = await fileHandle.createWritable();
|
||||
@@ -134,7 +134,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
};
|
||||
|
||||
const fileHandle = await window.showSaveFilePicker(pickerOpts) as FileSystemFileHandle;
|
||||
this.props.onSetFileHandle(fileHandle)
|
||||
this.props.onSetFileHandle(fileHandle);
|
||||
return fileHandle;
|
||||
}
|
||||
|
||||
@@ -145,8 +145,8 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
...this.props.mapStyle.metadata as any,
|
||||
[property]: value
|
||||
}
|
||||
}
|
||||
this.props.onStyleChanged(changedStyle)
|
||||
};
|
||||
this.props.onStyleChanged(changedStyle);
|
||||
}
|
||||
|
||||
|
||||
@@ -157,7 +157,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
data-wd-key="modal:export"
|
||||
isOpen={this.props.isOpen}
|
||||
onOpenToggle={this.props.onOpenToggle}
|
||||
title={t('Save Style')}
|
||||
title={t("Save Style")}
|
||||
className="maputnik-export-modal"
|
||||
>
|
||||
|
||||
@@ -171,25 +171,25 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
<FieldString
|
||||
label={fsa.maputnik.maptiler_access_token.label}
|
||||
fieldSpec={fsa.maputnik.maptiler_access_token}
|
||||
value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
|
||||
value={(this.props.mapStyle.metadata || {} as any)["maputnik:openmaptiles_access_token"]}
|
||||
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
|
||||
/>
|
||||
<FieldString
|
||||
label={fsa.maputnik.thunderforest_access_token.label}
|
||||
fieldSpec={fsa.maputnik.thunderforest_access_token}
|
||||
value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
|
||||
value={(this.props.mapStyle.metadata || {} as any)["maputnik:thunderforest_access_token"]}
|
||||
onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
|
||||
/>
|
||||
<FieldString
|
||||
label={fsa.maputnik.stadia_access_token.label}
|
||||
fieldSpec={fsa.maputnik.stadia_access_token}
|
||||
value={(this.props.mapStyle.metadata || {} as any)['maputnik:stadia_access_token']}
|
||||
value={(this.props.mapStyle.metadata || {} as any)["maputnik:stadia_access_token"]}
|
||||
onChange={this.changeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
|
||||
/>
|
||||
<FieldString
|
||||
label={fsa.maputnik.locationiq_access_token.label}
|
||||
fieldSpec={fsa.maputnik.locationiq_access_token}
|
||||
value={(this.props.mapStyle.metadata || {} as any)['maputnik:locationiq_access_token']}
|
||||
value={(this.props.mapStyle.metadata || {} as any)["maputnik:locationiq_access_token"]}
|
||||
onChange={this.changeMetadataProperty.bind(this, "maputnik:locationiq_access_token")}
|
||||
/>
|
||||
</div>
|
||||
@@ -213,7 +213,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Modal>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import InputButton from '../InputButton'
|
||||
import Modal from './Modal'
|
||||
import InputButton from "../InputButton";
|
||||
import Modal from "./Modal";
|
||||
|
||||
|
||||
type ModalLoadingInternalProps = {
|
||||
@@ -31,7 +31,7 @@ class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
|
||||
{t("Cancel")}
|
||||
</InputButton>
|
||||
</p>
|
||||
</Modal>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React, { FormEvent } from 'react'
|
||||
import {MdFileUpload} from 'react-icons/md'
|
||||
import {MdAddCircleOutline} from 'react-icons/md'
|
||||
import FileReaderInput, { Result } from 'react-file-reader-input'
|
||||
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React, { type FormEvent } from "react";
|
||||
import {MdFileUpload} from "react-icons/md";
|
||||
import {MdAddCircleOutline} from "react-icons/md";
|
||||
import FileReaderInput, { type Result } from "react-file-reader-input";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import ModalLoading from './ModalLoading'
|
||||
import Modal from './Modal'
|
||||
import InputButton from '../InputButton'
|
||||
import InputUrl from '../InputUrl'
|
||||
import ModalLoading from "./ModalLoading";
|
||||
import Modal from "./Modal";
|
||||
import InputButton from "../InputButton";
|
||||
import InputUrl from "../InputUrl";
|
||||
|
||||
import style from '../../libs/style'
|
||||
import publicStyles from '../../config/styles.json'
|
||||
import style from "../../libs/style";
|
||||
import publicStyles from "../../config/styles.json";
|
||||
|
||||
type PublicStyleProps = {
|
||||
url: string
|
||||
@@ -39,7 +39,7 @@ class PublicStyle extends React.Component<PublicStyleProps> {
|
||||
}}
|
||||
></div>
|
||||
</InputButton>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
clearError() {
|
||||
this.setState({
|
||||
error: null
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
onCancelActiveRequest(e: Event) {
|
||||
@@ -90,7 +90,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
let canceled: boolean = false;
|
||||
|
||||
fetch(styleUrl, {
|
||||
mode: 'cors',
|
||||
mode: "cors",
|
||||
credentials: "same-origin"
|
||||
})
|
||||
.then(function(response) {
|
||||
@@ -106,10 +106,10 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
activeRequestUrl: null
|
||||
});
|
||||
|
||||
const mapStyle = style.ensureStyleValidity(body)
|
||||
console.log('Loaded style ', mapStyle.id)
|
||||
this.props.onStyleOpen(mapStyle)
|
||||
this.onOpenToggle()
|
||||
const mapStyle = style.ensureStyleValidity(body);
|
||||
console.log("Loaded style ", mapStyle.id);
|
||||
this.props.onStyleOpen(mapStyle);
|
||||
this.onOpenToggle();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
@@ -118,8 +118,8 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
activeRequestUrl: null
|
||||
});
|
||||
console.error(err);
|
||||
console.warn('Could not open the style URL', styleUrl)
|
||||
})
|
||||
console.warn("Could not open the style URL", styleUrl);
|
||||
});
|
||||
|
||||
this.setState({
|
||||
activeRequest: {
|
||||
@@ -128,13 +128,13 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
}
|
||||
},
|
||||
activeRequestUrl: styleUrl
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onSubmitUrl = (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
this.onStyleSelect(this.state.styleUrl);
|
||||
}
|
||||
};
|
||||
|
||||
onOpenFile = async () => {
|
||||
this.clearError();
|
||||
@@ -155,19 +155,19 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
|
||||
let mapStyle;
|
||||
try {
|
||||
mapStyle = JSON.parse(content)
|
||||
mapStyle = JSON.parse(content);
|
||||
} catch (err) {
|
||||
this.setState({
|
||||
error: (err as Error).toString()
|
||||
});
|
||||
return;
|
||||
}
|
||||
mapStyle = style.ensureStyleValidity(mapStyle)
|
||||
mapStyle = style.ensureStyleValidity(mapStyle);
|
||||
|
||||
this.props.onStyleOpen(mapStyle, fileHandle);
|
||||
this.onOpenToggle();
|
||||
return file;
|
||||
}
|
||||
};
|
||||
|
||||
// it is not guaranteed that the File System Access API is available on all
|
||||
// browsers. If the function is not available, a fallback behavior is used.
|
||||
@@ -180,7 +180,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
reader.onload = e => {
|
||||
let mapStyle;
|
||||
try {
|
||||
mapStyle = JSON.parse(e.target?.result as string)
|
||||
mapStyle = JSON.parse(e.target?.result as string);
|
||||
}
|
||||
catch(err) {
|
||||
this.setState({
|
||||
@@ -188,12 +188,12 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
});
|
||||
return;
|
||||
}
|
||||
mapStyle = style.ensureStyleValidity(mapStyle)
|
||||
mapStyle = style.ensureStyleValidity(mapStyle);
|
||||
this.props.onStyleOpen(mapStyle);
|
||||
this.onOpenToggle();
|
||||
}
|
||||
};
|
||||
reader.onerror = e => console.log(e.target);
|
||||
}
|
||||
};
|
||||
|
||||
onOpenToggle() {
|
||||
this.setState({
|
||||
@@ -207,7 +207,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
this.setState({
|
||||
styleUrl: url,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
@@ -218,8 +218,8 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
title={style.title}
|
||||
thumbnailUrl={style.thumbnail}
|
||||
onSelect={this.onStyleSelect}
|
||||
/>
|
||||
})
|
||||
/>;
|
||||
});
|
||||
|
||||
let errorElement;
|
||||
if(this.state.error) {
|
||||
@@ -237,7 +237,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
data-wd-key="modal:open"
|
||||
isOpen={this.props.isOpen}
|
||||
onOpenToggle={() => this.onOpenToggle()}
|
||||
title={t('Open Style')}
|
||||
title={t("Open Style")}
|
||||
>
|
||||
{errorElement}
|
||||
<section className="maputnik-modal-section">
|
||||
@@ -299,12 +299,12 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
|
||||
|
||||
<ModalLoading
|
||||
isOpen={!!this.state.activeRequest}
|
||||
title={t('Loading style')}
|
||||
title={t("Loading style")}
|
||||
onCancel={(e: Event) => this.onCancelActiveRequest(e)}
|
||||
message={t("Loading: {{requestUrl}}", { requestUrl: this.state.activeRequestUrl })}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import React from 'react'
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from "maplibre-gl";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import FieldArray from '../FieldArray'
|
||||
import FieldNumber from '../FieldNumber'
|
||||
import FieldString from '../FieldString'
|
||||
import FieldUrl from '../FieldUrl'
|
||||
import FieldSelect from '../FieldSelect'
|
||||
import FieldEnum from '../FieldEnum'
|
||||
import FieldColor from '../FieldColor'
|
||||
import Modal from './Modal'
|
||||
import fieldSpecAdditional from '../../libs/field-spec-additional'
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions';
|
||||
import FieldArray from "../FieldArray";
|
||||
import FieldNumber from "../FieldNumber";
|
||||
import FieldString from "../FieldString";
|
||||
import FieldUrl from "../FieldUrl";
|
||||
import FieldSelect from "../FieldSelect";
|
||||
import FieldEnum from "../FieldEnum";
|
||||
import FieldColor from "../FieldColor";
|
||||
import Modal from "./Modal";
|
||||
import fieldSpecAdditional from "../../libs/field-spec-additional";
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";
|
||||
|
||||
type ModalSettingsInternalProps = {
|
||||
mapStyle: StyleSpecificationWithId
|
||||
@@ -26,7 +26,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
changeTransitionProperty(property: keyof TransitionSpecification, value: number | undefined) {
|
||||
const transition = {
|
||||
...this.props.mapStyle.transition,
|
||||
}
|
||||
};
|
||||
|
||||
if (value === undefined) {
|
||||
delete transition[property];
|
||||
@@ -44,7 +44,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
changeLightProperty(property: keyof LightSpecification, value: any) {
|
||||
const light = {
|
||||
...this.props.mapStyle.light,
|
||||
}
|
||||
};
|
||||
|
||||
if (value === undefined) {
|
||||
delete light[property];
|
||||
@@ -108,7 +108,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
data-wd-key="modal:settings"
|
||||
isOpen={this.props.isOpen}
|
||||
onOpenToggle={this.props.onOpenToggle}
|
||||
title={t('Style Settings')}
|
||||
title={t("Style Settings")}
|
||||
>
|
||||
<div className="modal:settings">
|
||||
<FieldString
|
||||
@@ -145,7 +145,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
label={fsa.maputnik.maptiler_access_token.label}
|
||||
fieldSpec={fsa.maputnik.maptiler_access_token}
|
||||
data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
|
||||
value={metadata['maputnik:openmaptiles_access_token']}
|
||||
value={metadata["maputnik:openmaptiles_access_token"]}
|
||||
onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
|
||||
/>
|
||||
|
||||
@@ -153,7 +153,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
label={fsa.maputnik.thunderforest_access_token.label}
|
||||
fieldSpec={fsa.maputnik.thunderforest_access_token}
|
||||
data-wd-key="modal:settings.maputnik:thunderforest_access_token"
|
||||
value={metadata['maputnik:thunderforest_access_token']}
|
||||
value={metadata["maputnik:thunderforest_access_token"]}
|
||||
onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
|
||||
/>
|
||||
|
||||
@@ -161,7 +161,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
label={fsa.maputnik.stadia_access_token.label}
|
||||
fieldSpec={fsa.maputnik.stadia_access_token}
|
||||
data-wd-key="modal:settings.maputnik:stadia_access_token"
|
||||
value={metadata['maputnik:stadia_access_token']}
|
||||
value={metadata["maputnik:stadia_access_token"]}
|
||||
onChange={onChangeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
|
||||
/>
|
||||
|
||||
@@ -169,7 +169,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
label={fsa.maputnik.locationiq_access_token.label}
|
||||
fieldSpec={fsa.maputnik.locationiq_access_token}
|
||||
data-wd-key="modal:settings.maputnik:locationiq_access_token"
|
||||
value={metadata['maputnik:locationiq_access_token']}
|
||||
value={metadata["maputnik:locationiq_access_token"]}
|
||||
onChange={onChangeMetadataProperty.bind(this, "maputnik:locationiq_access_token")}
|
||||
/>
|
||||
|
||||
@@ -280,16 +280,16 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
|
||||
fieldSpec={fsa.maputnik.style_renderer}
|
||||
data-wd-key="modal:settings.maputnik:renderer"
|
||||
options={[
|
||||
['mlgljs', 'MapLibreGL JS'],
|
||||
['ol', t('Open Layers (experimental)')],
|
||||
["mlgljs", "MapLibreGL JS"],
|
||||
["ol", t("Open Layers (experimental)")],
|
||||
]}
|
||||
value={metadata['maputnik:renderer'] || 'mlgljs'}
|
||||
onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
|
||||
value={metadata["maputnik:renderer"] || "mlgljs"}
|
||||
onChange={onChangeMetadataProperty.bind(this, "maputnik:renderer")}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
const ModalSettings = withTranslation()(ModalSettingsInternal)
|
||||
const ModalSettings = withTranslation()(ModalSettingsInternal);
|
||||
export default ModalSettings;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import Modal from './Modal'
|
||||
import Modal from "./Modal";
|
||||
|
||||
|
||||
type ModalShortcutsInternalProps = {
|
||||
@@ -46,7 +46,7 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
|
||||
key: <kbd>!</kbd>,
|
||||
text: t("Debug modal")
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
|
||||
const mapShortcuts = [
|
||||
@@ -98,14 +98,14 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
|
||||
key: <><kbd>Shift</kbd> + <kbd>Down</kbd></>,
|
||||
text: t("Decrease the pitch by 10 degrees.")
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
|
||||
return <Modal
|
||||
data-wd-key="modal:shortcuts"
|
||||
isOpen={this.props.isOpen}
|
||||
onOpenToggle={this.props.onOpenToggle}
|
||||
title={t('Shortcuts')}
|
||||
title={t("Shortcuts")}
|
||||
>
|
||||
<section className="maputnik-modal-section maputnik-modal-shortcuts">
|
||||
<p>
|
||||
@@ -118,7 +118,7 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
|
||||
return <div key={idx} className="maputnik-modal-shortcuts__shortcut">
|
||||
<dt key={"dt"+idx}>{item.key}</dt>
|
||||
<dd key={"dd"+idx}>{item.text}</dd>
|
||||
</div>
|
||||
</div>;
|
||||
})}
|
||||
</dl>
|
||||
<p>{t("If the Map is in focused you can use the following shortcuts")}</p>
|
||||
@@ -126,11 +126,11 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
|
||||
{mapShortcuts.map((item, idx) => {
|
||||
return <li key={idx}>
|
||||
<span>{item.key}</span> {item.text}
|
||||
</li>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
</Modal>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import React from 'react'
|
||||
import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, VectorSourceSpecification} from 'maplibre-gl'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import React from "react";
|
||||
import {MdAddCircleOutline, MdDelete} from "react-icons/md";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, VectorSourceSpecification} from "maplibre-gl";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
|
||||
import Modal from './Modal'
|
||||
import InputButton from '../InputButton'
|
||||
import FieldString from '../FieldString'
|
||||
import FieldSelect from '../FieldSelect'
|
||||
import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
|
||||
import Modal from "./Modal";
|
||||
import InputButton from "../InputButton";
|
||||
import FieldString from "../FieldString";
|
||||
import FieldSelect from "../FieldSelect";
|
||||
import ModalSourcesTypeEditor, { type EditorMode } from "./ModalSourcesTypeEditor";
|
||||
|
||||
import style from '../../libs/style'
|
||||
import { deleteSource, addSource, changeSource } from '../../libs/source'
|
||||
import publicSources from '../../config/tilesets.json'
|
||||
import { OnStyleChangedCallback, StyleSpecificationWithId } from '../../libs/definitions';
|
||||
import style from "../../libs/style";
|
||||
import { deleteSource, addSource, changeSource } from "../../libs/source";
|
||||
import publicSources from "../../config/tilesets.json";
|
||||
import { type OnStyleChangedCallback, type StyleSpecificationWithId } from "../../libs/definitions";
|
||||
|
||||
|
||||
type PublicSourceProps = {
|
||||
@@ -37,39 +37,39 @@ class PublicSource extends React.Component<PublicSourceProps> {
|
||||
<span className="maputnik-space" />
|
||||
<MdAddCircleOutline />
|
||||
</InputButton>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
function editorMode(source: SourceSpecification) {
|
||||
if(source.type === 'raster') {
|
||||
if(source.tiles) return 'tile_raster'
|
||||
return 'tilejson_raster'
|
||||
if(source.type === "raster") {
|
||||
if(source.tiles) return "tile_raster";
|
||||
return "tilejson_raster";
|
||||
}
|
||||
if(source.type === 'raster-dem') {
|
||||
if(source.tiles) return 'tilexyz_raster-dem'
|
||||
return 'tilejson_raster-dem'
|
||||
if(source.type === "raster-dem") {
|
||||
if(source.tiles) return "tilexyz_raster-dem";
|
||||
return "tilejson_raster-dem";
|
||||
}
|
||||
if(source.type === 'vector') {
|
||||
if(source.tiles) return 'tile_vector'
|
||||
if(source.url && source.url.startsWith("pmtiles://")) return 'pmtiles_vector'
|
||||
return 'tilejson_vector'
|
||||
if(source.type === "vector") {
|
||||
if(source.tiles) return "tile_vector";
|
||||
if(source.url && source.url.startsWith("pmtiles://")) return "pmtiles_vector";
|
||||
return "tilejson_vector";
|
||||
}
|
||||
if(source.type === 'geojson') {
|
||||
if(source.type === "geojson") {
|
||||
if (typeof(source.data) === "string") {
|
||||
return 'geojson_url';
|
||||
return "geojson_url";
|
||||
}
|
||||
else {
|
||||
return 'geojson_json';
|
||||
return "geojson_json";
|
||||
}
|
||||
}
|
||||
if(source.type === 'image') {
|
||||
return 'image';
|
||||
if(source.type === "image") {
|
||||
return "image";
|
||||
}
|
||||
if(source.type === 'video') {
|
||||
return 'video';
|
||||
if(source.type === "video") {
|
||||
return "video";
|
||||
}
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
type ActiveModalSourcesTypeEditorProps = {
|
||||
@@ -90,7 +90,7 @@ class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTyp
|
||||
aria-label={t("Remove '{{sourceId}}' source", {sourceId: this.props.sourceId})}
|
||||
className="maputnik-active-source-type-editor-header-delete"
|
||||
onClick={()=> this.props.onDelete(this.props.sourceId)}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
style={{backgroundColor: "transparent"}}
|
||||
>
|
||||
<MdDelete />
|
||||
</InputButton>
|
||||
@@ -102,7 +102,7 @@ class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTyp
|
||||
source={this.props.source}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,68 +118,68 @@ type AddSourceState = {
|
||||
|
||||
class AddSource extends React.Component<AddSourceProps, AddSourceState> {
|
||||
constructor(props: AddSourceProps) {
|
||||
super(props)
|
||||
super(props);
|
||||
this.state = {
|
||||
mode: 'tilejson_vector',
|
||||
mode: "tilejson_vector",
|
||||
sourceId: style.generateId(),
|
||||
source: this.defaultSource('tilejson_vector'),
|
||||
}
|
||||
source: this.defaultSource("tilejson_vector"),
|
||||
};
|
||||
}
|
||||
|
||||
defaultSource(mode: EditorMode): SourceSpecification {
|
||||
const source = (this.state || {}).source || {}
|
||||
const source = (this.state || {}).source || {};
|
||||
const {protocol} = window.location;
|
||||
|
||||
switch(mode) {
|
||||
case 'pmtiles_vector': return {
|
||||
type: 'vector',
|
||||
case "pmtiles_vector": return {
|
||||
type: "vector",
|
||||
url: `${protocol}//localhost:3000/file.pmtiles`
|
||||
}
|
||||
case 'geojson_url': return {
|
||||
type: 'geojson',
|
||||
};
|
||||
case "geojson_url": return {
|
||||
type: "geojson",
|
||||
data: `${protocol}//localhost:3000/geojson.json`
|
||||
}
|
||||
case 'geojson_json': return {
|
||||
type: 'geojson',
|
||||
};
|
||||
case "geojson_json": return {
|
||||
type: "geojson",
|
||||
cluster: (source as GeoJSONSourceSpecification).cluster || false,
|
||||
data: ''
|
||||
}
|
||||
case 'tilejson_vector': return {
|
||||
type: 'vector',
|
||||
data: ""
|
||||
};
|
||||
case "tilejson_vector": return {
|
||||
type: "vector",
|
||||
url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
|
||||
}
|
||||
case 'tile_vector': return {
|
||||
type: 'vector',
|
||||
};
|
||||
case "tile_vector": return {
|
||||
type: "vector",
|
||||
tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
|
||||
minzoom: (source as VectorSourceSpecification).minzoom || 0,
|
||||
maxzoom: (source as VectorSourceSpecification).maxzoom || 14,
|
||||
scheme: (source as VectorSourceSpecification).scheme || 'xyz'
|
||||
}
|
||||
case 'tilejson_raster': return {
|
||||
type: 'raster',
|
||||
scheme: (source as VectorSourceSpecification).scheme || "xyz"
|
||||
};
|
||||
case "tilejson_raster": return {
|
||||
type: "raster",
|
||||
url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
|
||||
}
|
||||
case 'tile_raster': return {
|
||||
type: 'raster',
|
||||
};
|
||||
case "tile_raster": return {
|
||||
type: "raster",
|
||||
tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
|
||||
minzoom: (source as RasterSourceSpecification).minzoom || 0,
|
||||
maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
|
||||
scheme: (source as RasterSourceSpecification).scheme || 'xyz',
|
||||
scheme: (source as RasterSourceSpecification).scheme || "xyz",
|
||||
tileSize: (source as RasterSourceSpecification).tileSize || 512,
|
||||
}
|
||||
case 'tilejson_raster-dem': return {
|
||||
type: 'raster-dem',
|
||||
};
|
||||
case "tilejson_raster-dem": return {
|
||||
type: "raster-dem",
|
||||
url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
|
||||
}
|
||||
case 'tilexyz_raster-dem': return {
|
||||
type: 'raster-dem',
|
||||
};
|
||||
case "tilexyz_raster-dem": return {
|
||||
type: "raster-dem",
|
||||
tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
|
||||
minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
|
||||
maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
|
||||
tileSize: (source as RasterDEMSourceSpecification).tileSize || 512
|
||||
}
|
||||
case 'image': return {
|
||||
type: 'image',
|
||||
};
|
||||
case "image": return {
|
||||
type: "image",
|
||||
url: `${protocol}//localhost:3000/image.png`,
|
||||
coordinates: [
|
||||
[0,0],
|
||||
@@ -187,9 +187,9 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
|
||||
[0,0],
|
||||
[0,0],
|
||||
],
|
||||
}
|
||||
case 'video': return {
|
||||
type: 'video',
|
||||
};
|
||||
case "video": return {
|
||||
type: "video",
|
||||
urls: [
|
||||
`${protocol}//localhost:3000/movie.mp4`
|
||||
],
|
||||
@@ -199,19 +199,19 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
|
||||
[0,0],
|
||||
[0,0],
|
||||
],
|
||||
}
|
||||
default: return {} as any
|
||||
};
|
||||
default: return {} as any;
|
||||
}
|
||||
}
|
||||
|
||||
onAdd = () => {
|
||||
const {source, sourceId} = this.state;
|
||||
this.props.onAdd(sourceId, source);
|
||||
}
|
||||
};
|
||||
|
||||
onChangeSource = (source: SourceSpecification) => {
|
||||
this.setState({source});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
@@ -238,17 +238,17 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
|
||||
label={t("Source Type")}
|
||||
fieldSpec={sourceTypeFieldSpec}
|
||||
options={[
|
||||
['geojson_json', t('GeoJSON (JSON)')],
|
||||
['geojson_url', t('GeoJSON (URL)')],
|
||||
['tilejson_vector', t('Vector (TileJSON URL)')],
|
||||
['tile_vector', t('Vector (Tile URLs)')],
|
||||
['tilejson_raster', t('Raster (TileJSON URL)')],
|
||||
['tile_raster', t('Raster (Tile URLs)')],
|
||||
['tilejson_raster-dem', t('Raster DEM (TileJSON URL)')],
|
||||
['tilexyz_raster-dem', t('Raster DEM (XYZ URLs)')],
|
||||
['pmtiles_vector', t('Vector (PMTiles)')],
|
||||
['image', t('Image')],
|
||||
['video', t('Video')],
|
||||
["geojson_json", t("GeoJSON (JSON)")],
|
||||
["geojson_url", t("GeoJSON (URL)")],
|
||||
["tilejson_vector", t("Vector (TileJSON URL)")],
|
||||
["tile_vector", t("Vector (Tile URLs)")],
|
||||
["tilejson_raster", t("Raster (TileJSON URL)")],
|
||||
["tile_raster", t("Raster (Tile URLs)")],
|
||||
["tilejson_raster-dem", t("Raster DEM (TileJSON URL)")],
|
||||
["tilexyz_raster-dem", t("Raster DEM (XYZ URLs)")],
|
||||
["pmtiles_vector", t("Vector (PMTiles)")],
|
||||
["image", t("Image")],
|
||||
["video", t("Video")],
|
||||
]}
|
||||
onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
|
||||
value={this.state.mode as string}
|
||||
@@ -266,7 +266,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
|
||||
>
|
||||
{t("Add Source")}
|
||||
</InputButton>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -279,16 +279,16 @@ type ModalSourcesInternalProps = {
|
||||
|
||||
class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
|
||||
stripTitle(source: SourceSpecification & {title?: string}): SourceSpecification {
|
||||
const strippedSource = {...source}
|
||||
delete strippedSource['title']
|
||||
return strippedSource
|
||||
const strippedSource = {...source};
|
||||
delete strippedSource["title"];
|
||||
return strippedSource;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {t, mapStyle} = this.props;
|
||||
const i18nProps = {t, i18n: this.props.i18n, tReady: this.props.tReady};
|
||||
const activeSources = Object.keys(mapStyle.sources).map(sourceId => {
|
||||
const source = mapStyle.sources[sourceId]
|
||||
const source = mapStyle.sources[sourceId];
|
||||
return <ActiveModalSourcesTypeEditor
|
||||
key={sourceId}
|
||||
sourceId={sourceId}
|
||||
@@ -296,8 +296,8 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
|
||||
onChange={(src: SourceSpecification) => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
|
||||
onDelete={() => this.props.onStyleChanged(deleteSource(mapStyle, sourceId))}
|
||||
{...i18nProps}
|
||||
/>
|
||||
})
|
||||
/>;
|
||||
});
|
||||
|
||||
const tilesetOptions = Object.keys(publicSources).filter((sourceId: string) => !(sourceId in mapStyle.sources)).map((sourceId: string) => {
|
||||
const source = publicSources[sourceId as keyof typeof publicSources] as SourceSpecification & {title: string};
|
||||
@@ -307,14 +307,14 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
|
||||
type={source.type}
|
||||
title={source.title}
|
||||
onSelect={() => this.props.onStyleChanged(addSource(mapStyle, sourceId, this.stripTitle(source)))}
|
||||
/>
|
||||
})
|
||||
/>;
|
||||
});
|
||||
|
||||
return <Modal
|
||||
data-wd-key="modal:sources"
|
||||
isOpen={this.props.isOpen}
|
||||
onOpenToggle={this.props.onOpenToggle}
|
||||
title={t('Sources')}
|
||||
title={t("Sources")}
|
||||
>
|
||||
<section className="maputnik-modal-section">
|
||||
<h1>{t("Active Sources")}</h1>
|
||||
@@ -339,7 +339,7 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
|
||||
{...i18nProps}
|
||||
/>
|
||||
</section>
|
||||
</Modal>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React from 'react'
|
||||
import {latest} from '@maplibre/maplibre-gl-style-spec'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { TFunction } from 'i18next'
|
||||
import React from "react";
|
||||
import {latest} from "@maplibre/maplibre-gl-style-spec";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { type TFunction } from "i18next";
|
||||
|
||||
import Block from '../Block'
|
||||
import FieldUrl from '../FieldUrl'
|
||||
import FieldNumber from '../FieldNumber'
|
||||
import FieldSelect from '../FieldSelect'
|
||||
import FieldDynamicArray from '../FieldDynamicArray'
|
||||
import FieldArray from '../FieldArray'
|
||||
import FieldJson from '../FieldJson'
|
||||
import FieldCheckbox from '../FieldCheckbox'
|
||||
import Block from "../Block";
|
||||
import FieldUrl from "../FieldUrl";
|
||||
import FieldNumber from "../FieldNumber";
|
||||
import FieldSelect from "../FieldSelect";
|
||||
import FieldDynamicArray from "../FieldDynamicArray";
|
||||
import FieldArray from "../FieldArray";
|
||||
import FieldJson from "../FieldJson";
|
||||
import FieldCheckbox from "../FieldCheckbox";
|
||||
|
||||
|
||||
export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
|
||||
@@ -38,7 +38,7 @@ class TileJSONSourceEditor extends React.Component<TileJSONSourceEditorProps> {
|
||||
})}
|
||||
/>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@ type TileURLSourceEditorProps = {
|
||||
tiles: string[]
|
||||
minzoom: number
|
||||
maxzoom: number
|
||||
scheme: 'xyz' | 'tms'
|
||||
scheme: "xyz" | "tms"
|
||||
}
|
||||
onChange(...args: unknown[]): unknown
|
||||
children?: React.ReactNode
|
||||
@@ -58,7 +58,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
|
||||
this.props.onChange({
|
||||
...this.props.source,
|
||||
tiles,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
renderTileUrls() {
|
||||
@@ -69,7 +69,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
|
||||
type="url"
|
||||
value={tiles}
|
||||
onChange={this.changeTileUrls.bind(this)}
|
||||
/>
|
||||
/>;
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -80,8 +80,8 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
|
||||
label={t("Scheme Type")}
|
||||
fieldSpec={latest.source_vector.scheme}
|
||||
options={[
|
||||
['xyz', 'xyz (Slippy map tilenames scheme)'],
|
||||
['tms', 'tms (OSGeo spec scheme)'],
|
||||
["xyz", "xyz (Slippy map tilenames scheme)"],
|
||||
["tms", "tms (OSGeo spec scheme)"],
|
||||
]}
|
||||
onChange={scheme => this.props.onChange({
|
||||
...this.props.source,
|
||||
@@ -109,7 +109,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
|
||||
})}
|
||||
/>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -140,7 +140,7 @@ class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
|
||||
...this.props.source,
|
||||
coordinates,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return <div>
|
||||
<FieldUrl
|
||||
@@ -165,7 +165,7 @@ class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,14 +188,14 @@ class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
|
||||
...this.props.source,
|
||||
coordinates,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const changeUrls = (urls: string[]) => {
|
||||
this.props.onChange({
|
||||
...this.props.source,
|
||||
urls,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return <div>
|
||||
<FieldDynamicArray
|
||||
@@ -219,7 +219,7 @@ class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,7 +241,7 @@ class GeoJSONSourceUrlEditor extends React.Component<GeoJSONSourceUrlEditorProps
|
||||
...this.props.source,
|
||||
data: data
|
||||
})}
|
||||
/>
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -270,21 +270,21 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
|
||||
this.props.onChange({
|
||||
...this.props.source,
|
||||
data,
|
||||
})
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Block>
|
||||
<FieldCheckbox
|
||||
label={t('Cluster')}
|
||||
label={t("Cluster")}
|
||||
value={this.props.source.cluster}
|
||||
onChange={cluster => {
|
||||
this.props.onChange({
|
||||
...this.props.source,
|
||||
cluster: cluster,
|
||||
})
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,7 +311,7 @@ class PMTilesSourceEditor extends React.Component<PMTilesSourceEditorProps> {
|
||||
})}
|
||||
/>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -332,12 +332,12 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
|
||||
tReady: this.props.tReady,
|
||||
};
|
||||
switch(this.props.mode) {
|
||||
case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
|
||||
case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
|
||||
case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
|
||||
case 'tile_vector': return <TileURLSourceEditor {...commonProps} />
|
||||
case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
|
||||
case 'tile_raster': return <TileURLSourceEditor {...commonProps}>
|
||||
case "geojson_url": return <GeoJSONSourceUrlEditor {...commonProps} />;
|
||||
case "geojson_json": return <GeoJSONSourceFieldJsonEditor {...commonProps} />;
|
||||
case "tilejson_vector": return <TileJSONSourceEditor {...commonProps} />;
|
||||
case "tile_vector": return <TileURLSourceEditor {...commonProps} />;
|
||||
case "tilejson_raster": return <TileJSONSourceEditor {...commonProps} />;
|
||||
case "tile_raster": return <TileURLSourceEditor {...commonProps}>
|
||||
<FieldNumber
|
||||
label={t("Tile Size")}
|
||||
fieldSpec={latest.source_raster.tileSize}
|
||||
@@ -348,9 +348,9 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
|
||||
value={this.props.source.tileSize || latest.source_raster.tileSize.default}
|
||||
data-wd-key="modal:sources.add.tile_size"
|
||||
/>
|
||||
</TileURLSourceEditor>
|
||||
case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
|
||||
case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
|
||||
</TileURLSourceEditor>;
|
||||
case "tilejson_raster-dem": return <TileJSONSourceEditor {...commonProps} />;
|
||||
case "tilexyz_raster-dem": return <TileURLSourceEditor {...commonProps}>
|
||||
<FieldNumber
|
||||
label={t("Tile Size")}
|
||||
fieldSpec={latest.source_raster_dem.tileSize}
|
||||
@@ -371,11 +371,11 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
|
||||
})}
|
||||
value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
|
||||
/>
|
||||
</TileURLSourceEditor>
|
||||
case 'pmtiles_vector': return <PMTilesSourceEditor {...commonProps} />
|
||||
case 'image': return <ImageSourceEditor {...commonProps} />
|
||||
case 'video': return <VideoSourceEditor {...commonProps} />
|
||||
default: return null
|
||||
</TileURLSourceEditor>;
|
||||
case "pmtiles_vector": return <PMTilesSourceEditor {...commonProps} />;
|
||||
case "image": return <ImageSourceEditor {...commonProps} />;
|
||||
case "video": return <VideoSourceEditor {...commonProps} />;
|
||||
default: return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { IconContext } from "react-icons";
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
import './favicon.ico'
|
||||
import './styles/index.scss'
|
||||
import './i18n';
|
||||
import App from './components/App';
|
||||
import "./favicon.ico";
|
||||
import "./styles/index.scss";
|
||||
import "./i18n";
|
||||
import App from "./components/App";
|
||||
|
||||
const root = createRoot(document.querySelector("#app"));
|
||||
root.render(
|
||||
<IconContext.Provider value={{className: 'react-icons'}}>
|
||||
<IconContext.Provider value={{className: "react-icons"}}>
|
||||
<App/>
|
||||
</IconContext.Provider>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import throttle from 'lodash.throttle'
|
||||
import throttle from "lodash.throttle";
|
||||
|
||||
// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
|
||||
const reducedMotionEnabled = throttle(() => {
|
||||
return window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
||||
}, 3000)
|
||||
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
}, 3000);
|
||||
|
||||
export { reducedMotionEnabled }
|
||||
export { reducedMotionEnabled };
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {parse} from '@prantlf/jsonlint';
|
||||
import CodeMirror, { MarkerRange } from 'codemirror';
|
||||
import jsonToAst from 'json-to-ast';
|
||||
import {expression, validateStyleMin} from '@maplibre/maplibre-gl-style-spec';
|
||||
import {parse} from "@prantlf/jsonlint";
|
||||
import CodeMirror, { type MarkerRange } from "codemirror";
|
||||
import jsonToAst from "json-to-ast";
|
||||
import {expression, validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
|
||||
|
||||
type MarkerRangeWithMessage = MarkerRange & {message: string};
|
||||
|
||||
@@ -90,7 +90,7 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
|
||||
newNode = newNode.value;
|
||||
}
|
||||
}
|
||||
return getArrayPositionalFromAst(newNode, path.slice(1))
|
||||
return getArrayPositionalFromAst(newNode, path.slice(1));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,12 +121,12 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
|
||||
// Remove the 'layers[0].' as we're validating the layer only here
|
||||
const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
|
||||
return {
|
||||
name: '',
|
||||
name: "",
|
||||
key: errMessageParts[0],
|
||||
message: errMessageParts[1],
|
||||
};
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
else if (context === "expression") {
|
||||
@@ -147,11 +147,11 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
|
||||
from: CodeMirror.Pos(doc.firstLine(), 0),
|
||||
to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
|
||||
message: message,
|
||||
}
|
||||
};
|
||||
found.push(err);
|
||||
}
|
||||
else if (key) {
|
||||
const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean)
|
||||
const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
|
||||
const parsedError = getArrayPositionalFromAst(ast, path);
|
||||
if (!parsedError) {
|
||||
console.warn("Something went wrong parsing error:", error);
|
||||
@@ -167,7 +167,7 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
return found;
|
||||
|
||||
2
src/libs/definitions.d.ts
vendored
2
src/libs/definitions.d.ts
vendored
@@ -6,7 +6,7 @@ export type OnStyleChangedOpts = {
|
||||
save?: boolean;
|
||||
addRevision?: boolean;
|
||||
initialLoad?: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
export type OnStyleChangedCallback = (newStyle: StyleSpecificationWithId, opts: OnStyleChangedOpts={}) => void;
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import {diff} from '@maplibre/maplibre-gl-style-spec'
|
||||
import type {StyleSpecification} from 'maplibre-gl'
|
||||
import {diff} from "@maplibre/maplibre-gl-style-spec";
|
||||
import type {StyleSpecification} from "maplibre-gl";
|
||||
|
||||
function diffMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
|
||||
const changes = diff(beforeStyle, afterStyle)
|
||||
return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
|
||||
const changes = diff(beforeStyle, afterStyle);
|
||||
return changes.map(cmd => cmd.command + " " + cmd.args.join(" "));
|
||||
}
|
||||
|
||||
export function undoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
|
||||
return diffMessages(beforeStyle, afterStyle).map(m => 'Undo ' + m)
|
||||
return diffMessages(beforeStyle, afterStyle).map(m => "Undo " + m);
|
||||
}
|
||||
export function redoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
|
||||
return diffMessages(beforeStyle, afterStyle).map(m => 'Redo ' + m)
|
||||
return diffMessages(beforeStyle, afterStyle).map(m => "Redo " + m);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { TFunction } from "i18next";
|
||||
import { type TFunction } from "i18next";
|
||||
|
||||
const spec = (t: TFunction) => ({
|
||||
maputnik: {
|
||||
@@ -31,6 +31,6 @@ const spec = (t: TFunction) => ({
|
||||
doc: t("Choose the default Maputnik renderer for this style.")
|
||||
},
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
export default spec;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
|
||||
export const combiningFilterOps = ['all', 'any', 'none'];
|
||||
export const setFilterOps = ['in', '!in'];
|
||||
export const combiningFilterOps = ["all", "any", "none"];
|
||||
export const setFilterOps = ["in", "!in"];
|
||||
export const otherFilterOps = Object
|
||||
.keys(latest.filter_operator.values)
|
||||
.filter(op => combiningFilterOps.indexOf(op) < 0);
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
import stylegen from '@maplibre/maplibre-gl-inspect/lib/stylegen'
|
||||
import colors from '@maplibre/maplibre-gl-inspect/lib/colors'
|
||||
import type {FilterSpecification,LayerSpecification } from 'maplibre-gl'
|
||||
import stylegen from "@maplibre/maplibre-gl-inspect/lib/stylegen";
|
||||
import colors from "@maplibre/maplibre-gl-inspect/lib/colors";
|
||||
import type {FilterSpecification,LayerSpecification } from "maplibre-gl";
|
||||
|
||||
export type HighlightedLayer = LayerSpecification & {filter?: FilterSpecification};
|
||||
|
||||
function changeLayer(l: HighlightedLayer, layer: LayerSpecification) {
|
||||
if(l.type === 'circle') {
|
||||
l.paint!['circle-radius'] = 3
|
||||
} else if(l.type === 'line') {
|
||||
l.paint!['line-width'] = 2
|
||||
if(l.type === "circle") {
|
||||
l.paint!["circle-radius"] = 3;
|
||||
} else if(l.type === "line") {
|
||||
l.paint!["line-width"] = 2;
|
||||
}
|
||||
|
||||
if("filter" in layer) {
|
||||
l.filter = layer.filter
|
||||
l.filter = layer.filter;
|
||||
} else {
|
||||
delete l['filter']
|
||||
delete l["filter"];
|
||||
}
|
||||
l.id = l.id + '_highlight'
|
||||
return l
|
||||
l.id = l.id + "_highlight";
|
||||
return l;
|
||||
}
|
||||
|
||||
export function colorHighlightedLayer(layer?: LayerSpecification): HighlightedLayer | null {
|
||||
if(!layer || layer.type === 'background' || layer.type === 'raster') return null
|
||||
if(!layer || layer.type === "background" || layer.type === "raster") return null;
|
||||
|
||||
const sourceLayerId = layer['source-layer'] || ''
|
||||
const sourceLayerId = layer["source-layer"] || "";
|
||||
const color = colors.brightColor(sourceLayerId, 1);
|
||||
|
||||
if(layer.type === "fill" || layer.type === 'fill-extrusion') {
|
||||
return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']), layer)
|
||||
if(layer.type === "fill" || layer.type === "fill-extrusion") {
|
||||
return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer["source-layer"]), layer);
|
||||
}
|
||||
|
||||
if(layer.type === "symbol" || layer.type === 'circle') {
|
||||
return changeLayer(stylegen.circleLayer(color, layer.source, layer['source-layer']), layer)
|
||||
if(layer.type === "symbol" || layer.type === "circle") {
|
||||
return changeLayer(stylegen.circleLayer(color, layer.source, layer["source-layer"]), layer);
|
||||
}
|
||||
|
||||
if(layer.type === 'line') {
|
||||
return changeLayer(stylegen.lineLayer(color, layer.source, layer['source-layer']), layer)
|
||||
if(layer.type === "line") {
|
||||
return changeLayer(stylegen.lineLayer(color, layer.source, layer["source-layer"]), layer);
|
||||
}
|
||||
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import capitalize from 'lodash.capitalize'
|
||||
import capitalize from "lodash.capitalize";
|
||||
|
||||
export default function labelFromFieldName(fieldName: string) {
|
||||
let label;
|
||||
const parts = fieldName.split('-');
|
||||
const parts = fieldName.split("-");
|
||||
if (parts.length > 1) {
|
||||
label = fieldName.split('-').slice(1).join(' ');
|
||||
label = fieldName.split("-").slice(1).join(" ");
|
||||
}
|
||||
else {
|
||||
label = fieldName;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user