mirror of
https://github.com/maputnik/editor.git
synced 2025-12-07 14:50:02 +00:00
Codemirror 5 to 6 upgrade (#1386)
## Launch Checklist - Resolves #891 This PR upgrades code mirror from version 5 to version 6. It should not change any functionality dramatically. The filter and other expressions have line numbers now as I was not able to remove those without introducing a lot of code, which I preferred not to. Before: <img width="571" height="933" alt="image" src="https://github.com/user-attachments/assets/02f047ee-0857-4eb1-9431-2620099ea025" /> After: <img width="571" height="933" alt="image" src="https://github.com/user-attachments/assets/7cf60155-7cd9-4c06-915e-dec2ae8247fc" /> - [x] Briefly describe the changes in this PR. - [x] Link to related issues. - [x] Include before/after visuals or gifs if this PR includes visual changes. - [x] Write tests for all new functionality. - [x] Add an entry to `CHANGELOG.md` under the `## main` section. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Harel M
GitHub
14
.github/workflows/ci.yml
vendored
14
.github/workflows/ci.yml
vendored
@@ -78,6 +78,20 @@ jobs:
|
||||
name: maputnik-windows
|
||||
path: ./desktop/bin/windows/
|
||||
|
||||
unit-tests:
|
||||
name: "Unit tests"
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v5
|
||||
- run: npm ci
|
||||
- run: npm run test-unit-ci
|
||||
- name: Upload coverage reports to Codecov
|
||||
uses: codecov/codecov-action@v5
|
||||
with:
|
||||
files: ${{ github.workspace }}/coverage/coverage-final.json
|
||||
verbose: true
|
||||
|
||||
e2e-tests:
|
||||
name: "E2E tests using chrome"
|
||||
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
- Add ability to control the projection of the map - either globe or mercator
|
||||
- Add markdown support for doc related to the style-spec fields
|
||||
- Added global state modal to allow editing the global state
|
||||
- Added color highlight for problematic properties
|
||||
- Upgraded codemirror from version 5 to version 6
|
||||
- _...Add new stuff here..._
|
||||
|
||||
### 🐞 Bug fixes
|
||||
@@ -17,6 +19,7 @@
|
||||
- Fixed an issue with the generation of tranlations
|
||||
- Fix missing spec info when clicking next to a property
|
||||
- Fix Firefox open file that stopped working due to react upgrade
|
||||
- Fix issue with missing bottom error panel
|
||||
- _...Add new stuff here..._
|
||||
|
||||
## 3.0.0
|
||||
|
||||
260
cypress/e2e/layer-editor.cy.ts
Normal file
260
cypress/e2e/layer-editor.cy.ts
Normal file
@@ -0,0 +1,260 @@
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
import { v1 as uuid } from "uuid";
|
||||
|
||||
describe("layer editor", () => {
|
||||
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
when.setStyle("both");
|
||||
when.modal.open();
|
||||
});
|
||||
|
||||
function createBackground() {
|
||||
const id = uuid();
|
||||
|
||||
when.selectWithin("add-layer.layer-type", "background");
|
||||
when.setValue("add-layer.layer-id.input", "background:" + id);
|
||||
|
||||
when.click("add-layer");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
return id;
|
||||
}
|
||||
|
||||
it("expand/collapse");
|
||||
it("id", () => {
|
||||
const bgId = createBackground();
|
||||
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
const id = uuid();
|
||||
when.setValue("layer-editor.layer-id.input", "foobar:" + id);
|
||||
when.click("min-zoom");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "foobar:" + id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("source", () => {
|
||||
it("should show error when the source is invalid", () => {
|
||||
when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "invalid",
|
||||
});
|
||||
then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
|
||||
});
|
||||
});
|
||||
|
||||
describe("min-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("min-zoom.input-text", "1");
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update min-zoom in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("when clicking next layer should update style on local storage", () => {
|
||||
when.type("min-zoom.input-text", "{backspace}");
|
||||
when.click("max-zoom.input-text");
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("max-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("max-zoom.input-text", "1");
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
maxzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("comments", () => {
|
||||
let bgId: string;
|
||||
const comment = "42";
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("layer-comment.input", comment);
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
metadata: {
|
||||
"maputnik:comment": comment,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when unsetting", () => {
|
||||
beforeEach(() => {
|
||||
when.clear("layer-comment.input");
|
||||
when.click("min-zoom.input-text");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("color", () => {
|
||||
let bgId: string;
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.click("spec-field:background-color");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("opacity", () => {
|
||||
let bgId: string;
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.type("spec-field-input:background-opacity", "0.");
|
||||
});
|
||||
|
||||
it("should keep '.' in the input field", () => {
|
||||
then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
|
||||
});
|
||||
|
||||
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");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe("filter", () => {
|
||||
it("expand/collapse");
|
||||
it("compound filter");
|
||||
});
|
||||
|
||||
describe("paint", () => {
|
||||
it("expand/collapse");
|
||||
it("color");
|
||||
it("pattern");
|
||||
it("opacity");
|
||||
});
|
||||
|
||||
describe("json-editor", () => {
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "circle",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const sourceText = get.elementByText('"source"');
|
||||
|
||||
sourceText.click();
|
||||
sourceText.type("\"");
|
||||
|
||||
then(get.element(".cm-lint-marker-error")).shouldExist();
|
||||
});
|
||||
|
||||
|
||||
it("expand/collapse");
|
||||
it("modify");
|
||||
|
||||
it("parse error", () => {
|
||||
const bgId = createBackground();
|
||||
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.collapseGroupInLayerEditor(1);
|
||||
then(get.element(".cm-lint-marker-error")).shouldNotExist();
|
||||
|
||||
when.appendTextInJsonEditor(
|
||||
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
|
||||
);
|
||||
then(get.element(".cm-lint-marker-error")).shouldExist();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,6 @@
|
||||
import { v1 as uuid } from "uuid";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("layers", () => {
|
||||
describe("layers list", () => {
|
||||
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
@@ -132,227 +131,7 @@ describe("layers", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("modify", () => {
|
||||
function createBackground() {
|
||||
// Setup
|
||||
const id = uuid();
|
||||
|
||||
when.selectWithin("add-layer.layer-type", "background");
|
||||
when.setValue("add-layer.layer-id.input", "background:" + id);
|
||||
|
||||
when.click("add-layer");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
return id;
|
||||
}
|
||||
|
||||
// ====> THESE SHOULD BE FROM THE SPEC
|
||||
describe("layer", () => {
|
||||
it("expand/collapse");
|
||||
it("id", () => {
|
||||
const bgId = createBackground();
|
||||
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
const id = uuid();
|
||||
when.setValue("layer-editor.layer-id.input", "foobar:" + id);
|
||||
when.click("min-zoom");
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "foobar:" + id,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("min-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("min-zoom.input-text", "1");
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update min-zoom in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("when clicking next layer should update style on local storage", () => {
|
||||
when.type("min-zoom.input-text", "{backspace}");
|
||||
when.click("max-zoom.input-text");
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("max-zoom", () => {
|
||||
let bgId: string;
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("max-zoom.input-text", "1");
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
maxzoom: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("comments", () => {
|
||||
let bgId: string;
|
||||
const comment = "42";
|
||||
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue("layer-comment.input", comment);
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
metadata: {
|
||||
"maputnik:comment": comment,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
describe("when unsetting", () => {
|
||||
beforeEach(() => {
|
||||
when.clear("layer-comment.input");
|
||||
when.click("min-zoom.input-text");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("color", () => {
|
||||
let bgId: string;
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.click("spec-field:background-color");
|
||||
});
|
||||
|
||||
it("should update style in local storage", () => {
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("opacity", () => {
|
||||
let bgId: string;
|
||||
beforeEach(() => {
|
||||
bgId = createBackground();
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.type("spec-field-input:background-opacity", "0.");
|
||||
});
|
||||
|
||||
it("should keep '.' in the input field", () => {
|
||||
then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
|
||||
});
|
||||
|
||||
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");
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("filter", () => {
|
||||
it("expand/collapse");
|
||||
it("compound filter");
|
||||
});
|
||||
|
||||
describe("paint", () => {
|
||||
it("expand/collapse");
|
||||
it("color");
|
||||
it("pattern");
|
||||
it("opacity");
|
||||
});
|
||||
// <=====
|
||||
|
||||
describe("json-editor", () => {
|
||||
it("expand/collapse");
|
||||
it("modify");
|
||||
|
||||
// TODO
|
||||
it.skip("parse error", () => {
|
||||
const bgId = createBackground();
|
||||
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
const errorSelector = ".CodeMirror-lint-marker-error";
|
||||
then(get.elementByTestId(errorSelector)).shouldNotExist();
|
||||
|
||||
when.click(".CodeMirror");
|
||||
when.typeKeys(
|
||||
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
|
||||
);
|
||||
then(get.elementByTestId(errorSelector)).shouldExist();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("modify", () => {});
|
||||
});
|
||||
|
||||
describe("fill", () => {
|
||||
@@ -658,7 +437,7 @@ describe("layers", () => {
|
||||
});
|
||||
when.collapseGroupInLayerEditor();
|
||||
when.click("make-elevation-function");
|
||||
then(get.element("[data-wd-key='spec-field-container:color-relief-color'] .CodeMirror-line")).shouldBeVisible();
|
||||
then(get.element("[data-wd-key='spec-field-container:color-relief-color'] .cm-line")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -698,48 +477,6 @@ describe("layers", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("layers editor", () => {
|
||||
describe("property fields", () => {
|
||||
it("should show error", () => {
|
||||
when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "invalid",
|
||||
});
|
||||
|
||||
then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
|
||||
});
|
||||
});
|
||||
|
||||
describe("jsonlint should error", ()=>{
|
||||
it("add", () => {
|
||||
const id = when.modal.fillLayers({
|
||||
type: "circle",
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
|
||||
layers: [
|
||||
{
|
||||
id: id,
|
||||
type: "circle",
|
||||
source: "example",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const sourceText = get.elementByText('"source"');
|
||||
|
||||
sourceText.click();
|
||||
sourceText.type("\"");
|
||||
|
||||
const error = get.element(".CodeMirror-lint-marker-error");
|
||||
error.should("exist");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe("drag and drop", () => {
|
||||
it("move layer should update local storage", () => {
|
||||
when.modal.open();
|
||||
@@ -195,6 +195,10 @@ export class MaputnikDriver {
|
||||
|
||||
collapseGroupInLayerEditor: (index = 0) => {
|
||||
this.helper.get.element(".maputnik-layer-editor-group__button").eq(index).realClick();
|
||||
},
|
||||
|
||||
appendTextInJsonEditor: (text: string) => {
|
||||
this.helper.get.element(".cm-line").first().click().type(text, { parseSpecialCharSequences: false });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
4495
package-lock.json
generated
4495
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
@@ -12,6 +12,8 @@
|
||||
"i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
|
||||
"lint": "eslint",
|
||||
"test": "cypress run",
|
||||
"test-unit": "vitest",
|
||||
"test-unit-ci": "vitest run --coverage --reporter=json",
|
||||
"cy:open": "cypress open",
|
||||
"lint-css": "stylelint \"src/styles/*.scss\"",
|
||||
"sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
|
||||
@@ -24,18 +26,22 @@
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/maplibre/maputnik#readme",
|
||||
"dependencies": {
|
||||
"@codemirror/lang-json": "^6.0.2",
|
||||
"@codemirror/lint": "^6.8.5",
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.38.2",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.3.0",
|
||||
"@maplibre/maplibre-gl-geocoder": "^1.9.0",
|
||||
"@maplibre/maplibre-gl-inspect": "^1.7.1",
|
||||
"@maplibre/maplibre-gl-style-spec": "^23.3.0",
|
||||
"@prantlf/jsonlint": "^16.0.0",
|
||||
"@maplibre/maplibre-gl-style-spec": "^24.1.0",
|
||||
"array-move": "^4.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"classnames": "^2.5.1",
|
||||
"codemirror": "^5.65.20",
|
||||
"codemirror": "^6.0.2",
|
||||
"color": "^5.0.2",
|
||||
"detect-browser": "^5.3.0",
|
||||
"downshift": "^9.0.10",
|
||||
@@ -53,7 +59,7 @@
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"maplibre-gl": "^5.7.1",
|
||||
"maplibre-gl": "^5.7.2",
|
||||
"maputnik-design": "github:maputnik/design#172b06c",
|
||||
"ol": "^10.6.1",
|
||||
"ol-mapbox-style": "^13.1.0",
|
||||
@@ -118,9 +124,9 @@
|
||||
"@types/react-color": "^3.0.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@types/string-hash": "^1.1.3",
|
||||
"@types/uuid": "^11.0.0",
|
||||
"@types/wicg-file-system-access": "^2023.10.6",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"@vitest/coverage-v8": "^3.2.4",
|
||||
"cors": "^2.8.5",
|
||||
"cypress": "^15.2.0",
|
||||
"cypress-plugin-tab": "^1.0.5",
|
||||
@@ -141,6 +147,7 @@
|
||||
"typescript-eslint": "^8.44.0",
|
||||
"uuid": "^13.0.0",
|
||||
"vite": "^7.1.5",
|
||||
"vite-plugin-istanbul": "^7.2.0"
|
||||
"vite-plugin-istanbul": "^7.2.0",
|
||||
"vitest": "^3.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ import { TbMathFunction } from "react-icons/tb";
|
||||
import { PiListPlusBold } from "react-icons/pi";
|
||||
import {isEqual} from "lodash";
|
||||
import {type ExpressionSpecification, type LegacyFilterSpecification} from "maplibre-gl";
|
||||
import {latest, migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
|
||||
import {migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
|
||||
import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
|
||||
|
||||
import {combiningFilterOps} from "../libs/filterops";
|
||||
import InputSelect from "./InputSelect";
|
||||
@@ -96,7 +97,7 @@ type FilterEditorInternalProps = {
|
||||
properties?: {[key:string]: any}
|
||||
filter?: any[]
|
||||
errors?: MappedLayerErrors
|
||||
onChange(value: LegacyFilterSpecification | ExpressionSpecification): unknown
|
||||
onChange(value: LegacyFilterSpecification | ExpressionSpecification): void
|
||||
} & WithTranslation;
|
||||
|
||||
type FilterEditorState = {
|
||||
@@ -293,7 +294,6 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
|
||||
this.props.onChange(defaultFilter);
|
||||
}}
|
||||
fieldName="filter"
|
||||
fieldSpec={fieldSpec}
|
||||
value={filter}
|
||||
errors={errors}
|
||||
onChange={this.props.onChange}
|
||||
|
||||
@@ -1,127 +1,87 @@
|
||||
import React from "react";
|
||||
import classnames from "classnames";
|
||||
import CodeMirror, { type ModeSpec } from "codemirror";
|
||||
import { Trans, type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { 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 { type EditorView } from "@codemirror/view";
|
||||
import stringifyPretty from "json-stringify-pretty-compact";
|
||||
import "../libs/codemirror-mgl";
|
||||
import type { LayerSpecification } from "maplibre-gl";
|
||||
|
||||
import {createEditor} from "../libs/codemirror-editor-factory";
|
||||
import type { StylePropertySpecification } from "maplibre-gl";
|
||||
|
||||
export type InputJsonProps = {
|
||||
layer: LayerSpecification
|
||||
value: object
|
||||
maxHeight?: number
|
||||
onChange?(...args: unknown[]): unknown
|
||||
lineNumbers?: boolean
|
||||
lineWrapping?: boolean
|
||||
getValue?(data: any): string
|
||||
gutters?: string[]
|
||||
className?: string
|
||||
onChange(object: object): void
|
||||
onFocus?(...args: unknown[]): unknown
|
||||
onBlur?(...args: unknown[]): unknown
|
||||
onJSONValid?(...args: unknown[]): unknown
|
||||
onJSONInvalid?(...args: unknown[]): unknown
|
||||
mode?: ModeSpec<any>
|
||||
lint?: boolean | object
|
||||
lintType: "layer" | "style" | "expression" | "json"
|
||||
spec?: StylePropertySpecification | undefined
|
||||
};
|
||||
type InputJsonInternalProps = InputJsonProps & WithTranslation;
|
||||
|
||||
type InputJsonState = {
|
||||
isEditing: boolean
|
||||
showMessage: boolean
|
||||
prevValue: string
|
||||
};
|
||||
|
||||
class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJsonState> {
|
||||
static defaultProps = {
|
||||
lineNumbers: true,
|
||||
lineWrapping: false,
|
||||
gutters: ["CodeMirror-lint-markers"],
|
||||
getValue: (data: any) => {
|
||||
return stringifyPretty(data, {indent: 2, maxLength: 40});
|
||||
},
|
||||
onFocus: () => {},
|
||||
onBlur: () => {},
|
||||
onJSONInvalid: () => {},
|
||||
onJSONValid: () => {},
|
||||
};
|
||||
_keyEvent: string;
|
||||
_doc: CodeMirror.Editor | undefined;
|
||||
_view: EditorView | undefined;
|
||||
_el: HTMLDivElement | null = null;
|
||||
_cancelNextChange: boolean = false;
|
||||
|
||||
constructor(props: InputJsonInternalProps) {
|
||||
super(props);
|
||||
this._keyEvent = "keyboard";
|
||||
this.state = {
|
||||
isEditing: false,
|
||||
showMessage: false,
|
||||
prevValue: this.props.getValue!(this.props.layer),
|
||||
prevValue: this.getPrettyJson(this.props.value),
|
||||
};
|
||||
}
|
||||
|
||||
getPrettyJson(data: any) {
|
||||
return stringifyPretty(data, {indent: 2, maxLength: 40});
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this._doc = CodeMirror(this._el!, {
|
||||
value: this.props.getValue!(this.props.layer),
|
||||
mode: this.props.mode || {
|
||||
name: "mgl",
|
||||
},
|
||||
lineWrapping: this.props.lineWrapping,
|
||||
tabSize: 2,
|
||||
theme: "maputnik",
|
||||
viewportMargin: Infinity,
|
||||
lineNumbers: this.props.lineNumbers,
|
||||
lint: this.props.lint || {
|
||||
context: "layer"
|
||||
},
|
||||
matchBrackets: true,
|
||||
gutters: this.props.gutters,
|
||||
scrollbarStyle: "null",
|
||||
this._view = createEditor({
|
||||
parent: this._el!,
|
||||
value: this.getPrettyJson(this.props.value),
|
||||
lintType: this.props.lintType || "layer",
|
||||
onChange: (value:string) => this.onChange(value),
|
||||
onFocus: () => this.onFocus(),
|
||||
onBlur: () => this.onBlur(),
|
||||
spec: this.props.spec
|
||||
});
|
||||
|
||||
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();
|
||||
this.setState({
|
||||
isEditing: true,
|
||||
showMessage: (this._keyEvent === "keyboard"),
|
||||
});
|
||||
};
|
||||
|
||||
onBlur = () => {
|
||||
this._keyEvent = "keyboard";
|
||||
if (this.props.onBlur) this.props.onBlur();
|
||||
this.setState({
|
||||
isEditing: false,
|
||||
showMessage: false,
|
||||
});
|
||||
};
|
||||
|
||||
componentWillUnMount () {
|
||||
this._doc!.off("change", this.onChange);
|
||||
this._doc!.off("focus", this.onFocus);
|
||||
this._doc!.off("blur", this.onBlur);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: InputJsonProps) {
|
||||
if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
|
||||
if (!this.state.isEditing && prevProps.value !== this.props.value) {
|
||||
this._cancelNextChange = true;
|
||||
this._doc!.setValue(
|
||||
this.props.getValue!(this.props.layer),
|
||||
);
|
||||
this._view!.dispatch({
|
||||
changes: {
|
||||
from: 0,
|
||||
to: this._view!.state.doc.length,
|
||||
insert: this.getPrettyJson(this.props.value)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,11 +89,11 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
if (this._cancelNextChange) {
|
||||
this._cancelNextChange = false;
|
||||
this.setState({
|
||||
prevValue: this._doc!.getValue(),
|
||||
prevValue: this._view!.state.doc.toString(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
const newCode = this._doc!.getValue();
|
||||
const newCode = this._view!.state.doc.toString();
|
||||
|
||||
if (this.state.prevValue !== newCode) {
|
||||
let parsedLayer, err;
|
||||
@@ -144,12 +104,8 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
console.warn(_err);
|
||||
}
|
||||
|
||||
if (err && this.props.onJSONInvalid) {
|
||||
this.props.onJSONInvalid();
|
||||
}
|
||||
else {
|
||||
if (!err) {
|
||||
if (this.props.onChange) this.props.onChange(parsedLayer);
|
||||
if (this.props.onJSONValid) this.props.onJSONValid();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,19 +115,12 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
|
||||
};
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
const {showMessage} = this.state;
|
||||
const style = {} as {maxHeight?: number};
|
||||
if (this.props.maxHeight) {
|
||||
style.maxHeight = this.props.maxHeight;
|
||||
}
|
||||
|
||||
return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
|
||||
<div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
|
||||
<Trans t={t}>
|
||||
Press <kbd>ESC</kbd> to lose focus
|
||||
</Trans>
|
||||
</div>
|
||||
return <div className="json-editor" data-wd-key="json-editor" aria-hidden="true" style={{cursor: "text"}}>
|
||||
<div
|
||||
className={classnames("codemirror-container", this.props.className)}
|
||||
ref={(el) => {this._el = el;}}
|
||||
|
||||
@@ -119,7 +119,7 @@ type LayerEditorInternalProps = {
|
||||
sources: {[key: string]: SourceSpecification & {layers: string[]}}
|
||||
vectorLayers: {[key: string]: any}
|
||||
spec: any
|
||||
onLayerChanged(...args: unknown[]): unknown
|
||||
onLayerChanged(index: number, layer: LayerSpecification): void
|
||||
onLayerIdChange(...args: unknown[]): unknown
|
||||
onMoveLayer: OnMoveLayerCallback
|
||||
onLayerDestroy(...args: unknown[]): unknown
|
||||
@@ -280,8 +280,9 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
|
||||
/>;
|
||||
case "jsoneditor":
|
||||
return <FieldJson
|
||||
layer={this.props.layer}
|
||||
onChange={(layer) => {
|
||||
lintType="layer"
|
||||
value={this.props.layer}
|
||||
onChange={(layer: LayerSpecification) => {
|
||||
this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
layer
|
||||
|
||||
@@ -1,34 +1,30 @@
|
||||
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 type { StylePropertySpecification } from "maplibre-gl";
|
||||
import { type MappedLayerErrors } from "../libs/definitions";
|
||||
|
||||
|
||||
type ExpressionPropertyInternalProps = {
|
||||
onDelete?(...args: unknown[]): unknown
|
||||
fieldName: string
|
||||
fieldType?: string
|
||||
fieldSpec?: object
|
||||
fieldSpec?: StylePropertySpecification
|
||||
value?: any
|
||||
errors?: MappedLayerErrors
|
||||
onChange?(...args: unknown[]): unknown
|
||||
onDelete?(...args: unknown[]): unknown
|
||||
onChange(value: object): void
|
||||
onUndo?(...args: unknown[]): unknown
|
||||
canUndo?(...args: unknown[]): unknown
|
||||
onFocus?(...args: unknown[]): unknown
|
||||
onBlur?(...args: unknown[]): unknown
|
||||
} & WithTranslation;
|
||||
|
||||
type ExpressionPropertyState = {
|
||||
jsonError: boolean
|
||||
};
|
||||
|
||||
class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInternalProps, ExpressionPropertyState> {
|
||||
class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInternalProps> {
|
||||
static defaultProps = {
|
||||
errors: {},
|
||||
onFocus: () => {},
|
||||
@@ -42,21 +38,8 @@ 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;
|
||||
const {jsonError} = this.state;
|
||||
const {t, value, canUndo} = this.props;
|
||||
const undoDisabled = canUndo ? !canUndo() : true;
|
||||
|
||||
const deleteStopBtn = (
|
||||
@@ -82,58 +65,26 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
|
||||
</InputButton>
|
||||
</>
|
||||
);
|
||||
|
||||
const fieldKey = fieldType === undefined ? fieldName : `${fieldType}.${fieldName}`;
|
||||
|
||||
const fieldError = errors![fieldKey];
|
||||
const errorKeyStart = `${fieldKey}[`;
|
||||
const foundErrors = [];
|
||||
|
||||
function getValue(data: any) {
|
||||
return stringifyPretty(data, {indent: 2, maxLength: 38});
|
||||
let error = undefined;
|
||||
if (this.props.errors) {
|
||||
const fieldKey = this.props.fieldType ? this.props.fieldType + "." + this.props.fieldName : this.props.fieldName;
|
||||
error = this.props.errors[fieldKey];
|
||||
}
|
||||
|
||||
if (jsonError) {
|
||||
foundErrors.push({message: "Invalid JSON"});
|
||||
}
|
||||
else {
|
||||
Object.entries(errors!)
|
||||
.filter(([key, _error]) => {
|
||||
return key.startsWith(errorKeyStart);
|
||||
})
|
||||
.forEach(([_key, error]) => {
|
||||
return foundErrors.push(error);
|
||||
});
|
||||
|
||||
if (fieldError) {
|
||||
foundErrors.push(fieldError);
|
||||
}
|
||||
}
|
||||
|
||||
return <Block
|
||||
// this feels like an incorrect type...? `foundErrors` is an array of objects, not a single object
|
||||
error={foundErrors as any}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
label={t(labelFromFieldName(this.props.fieldName))}
|
||||
action={deleteStopBtn}
|
||||
wideMode={true}
|
||||
error={error}
|
||||
>
|
||||
<FieldJson
|
||||
mode={{name: "mgl"}}
|
||||
lint={{
|
||||
context: "expression",
|
||||
spec: this.props.fieldSpec,
|
||||
}}
|
||||
lintType="expression"
|
||||
spec={this.props.fieldSpec}
|
||||
className="maputnik-expression-editor"
|
||||
onFocus={this.props.onFocus}
|
||||
onBlur={this.props.onBlur}
|
||||
onJSONInvalid={this.onJSONInvalid}
|
||||
onJSONValid={this.onJSONValid}
|
||||
layer={value}
|
||||
lineNumbers={false}
|
||||
value={value}
|
||||
maxHeight={200}
|
||||
lineWrapping={true}
|
||||
getValue={getValue}
|
||||
onChange={this.props.onChange}
|
||||
/>
|
||||
</Block>;
|
||||
|
||||
@@ -259,13 +259,9 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
|
||||
return <div>
|
||||
<Block label={t("GeoJSON")} fieldSpec={latest.source_geojson.data}>
|
||||
<FieldJson
|
||||
layer={this.props.source.data}
|
||||
value={this.props.source.data}
|
||||
maxHeight={200}
|
||||
mode={{
|
||||
name: "javascript",
|
||||
json: true
|
||||
}}
|
||||
lint={true}
|
||||
lintType="json"
|
||||
onChange={data => {
|
||||
this.props.onChange({
|
||||
...this.props.source,
|
||||
|
||||
193
src/libs/codemirror-editor-factory.ts
Normal file
193
src/libs/codemirror-editor-factory.ts
Normal file
@@ -0,0 +1,193 @@
|
||||
import { basicSetup } from "codemirror";
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { EditorState, Compartment } from "@codemirror/state";
|
||||
import { json, jsonParseLinter } from "@codemirror/lang-json";
|
||||
import { linter, lintGutter, type Diagnostic } from "@codemirror/lint";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { expression, type StylePropertySpecification, validateStyleMin } from "@maplibre/maplibre-gl-style-spec";
|
||||
import jsonToAst, { type ValueNode, type PropertyNode } from "json-to-ast";
|
||||
import { jsonPathToPosition } from "./json-path-to-position";
|
||||
|
||||
export type LintType = "layer" | "style" | "expression" | "json";
|
||||
|
||||
type LinterError = {
|
||||
key: string | null;
|
||||
message: string;
|
||||
};
|
||||
|
||||
function getDiagnosticsFromExpressionErrors(errors: LinterError[], ast: ValueNode | PropertyNode) {
|
||||
const diagnostics: Diagnostic[] = [];
|
||||
for (const error of errors) {
|
||||
const {key, message} = error;
|
||||
if (!key) {
|
||||
diagnostics.push({
|
||||
from: 0,
|
||||
to: ast.loc ? ast.loc.end.offset : 0,
|
||||
severity: "error",
|
||||
message: message,
|
||||
});
|
||||
} else {
|
||||
const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
|
||||
const node = jsonPathToPosition(path, ast);
|
||||
if (!node) {
|
||||
console.warn("Something went wrong parsing error:", error);
|
||||
continue;
|
||||
}
|
||||
if (node.loc) {
|
||||
diagnostics.push({
|
||||
from: node.loc.start.offset,
|
||||
to: node.loc.end.offset,
|
||||
severity: "error",
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return diagnostics;
|
||||
}
|
||||
|
||||
function createMaplibreLayerLinter() {
|
||||
return (view: EditorView) => {
|
||||
const text = view.state.doc.toString();
|
||||
|
||||
try {
|
||||
// Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
|
||||
const parsedJson = JSON.parse(text);
|
||||
const ast = jsonToAst(text);
|
||||
|
||||
// Run the maplibre-gl-style-spec validator.
|
||||
const validationErrors = validateStyleMin({
|
||||
"version": 8,
|
||||
"name": "Empty Style",
|
||||
"metadata": {},
|
||||
"sources": {},
|
||||
"sprite": "",
|
||||
"glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
parsedJson
|
||||
]
|
||||
});
|
||||
|
||||
const linterErrors = validationErrors
|
||||
.filter(err => {
|
||||
// Remove missing 'layer source' errors, because we don't include them
|
||||
return !err.message.match(/^layers\[0\]: source ".*" not found$/);
|
||||
})
|
||||
.map(err => {
|
||||
// Remove the 'layers[0].' as we're validating the layer only here
|
||||
const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
|
||||
return {
|
||||
key: errMessageParts[0],
|
||||
message: errMessageParts[1],
|
||||
};
|
||||
});
|
||||
return getDiagnosticsFromExpressionErrors(linterErrors, ast);
|
||||
} catch {
|
||||
// The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
|
||||
}
|
||||
return [];
|
||||
};
|
||||
}
|
||||
|
||||
function createMaplibreStyleLinter() {
|
||||
return (view: EditorView) => {
|
||||
const text = view.state.doc.toString();
|
||||
|
||||
try {
|
||||
// Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
|
||||
const parsedJson = JSON.parse(text);
|
||||
const ast = jsonToAst(text);
|
||||
|
||||
// Run the maplibre-gl-style-spec validator.
|
||||
const validationErrors = validateStyleMin(parsedJson);
|
||||
const linterErrors = validationErrors.map(err => {
|
||||
return {
|
||||
key: err.message.split(":")[0],
|
||||
message: err.message,
|
||||
};
|
||||
});
|
||||
return getDiagnosticsFromExpressionErrors(linterErrors, ast);
|
||||
} catch {
|
||||
// The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
|
||||
}
|
||||
return [];
|
||||
};
|
||||
}
|
||||
|
||||
function createMaplibreExpressionLinter(spec?: StylePropertySpecification) {
|
||||
return (view: EditorView) => {
|
||||
const text = view.state.doc.toString();
|
||||
const parsedJson = JSON.parse(text);
|
||||
const ast = jsonToAst(text);
|
||||
const out = expression.createExpression(parsedJson, spec);
|
||||
if (out?.result !== "error") {
|
||||
return [];
|
||||
}
|
||||
const errors = out.value;
|
||||
return getDiagnosticsFromExpressionErrors(errors, ast);
|
||||
};
|
||||
}
|
||||
|
||||
export function createEditor(props: {
|
||||
parent: HTMLElement,
|
||||
value: string,
|
||||
lintType: LintType,
|
||||
onChange: (value: string) => void,
|
||||
onFocus: () => void,
|
||||
onBlur: () => void,
|
||||
spec?: StylePropertySpecification,
|
||||
}): EditorView {
|
||||
let specificLinter: (view: EditorView) => Diagnostic[] = () => [];
|
||||
switch (props.lintType) {
|
||||
case "style":
|
||||
specificLinter = createMaplibreStyleLinter();
|
||||
break;
|
||||
case "layer":
|
||||
specificLinter = createMaplibreLayerLinter();
|
||||
break;
|
||||
case "expression":
|
||||
specificLinter = createMaplibreExpressionLinter(props.spec);
|
||||
break;
|
||||
case "json":
|
||||
specificLinter = () => [];
|
||||
break;
|
||||
}
|
||||
|
||||
return new EditorView({
|
||||
doc: props.value,
|
||||
extensions: [
|
||||
basicSetup,
|
||||
json(),
|
||||
oneDark,
|
||||
new Compartment().of(EditorState.tabSize.of(2)),
|
||||
EditorView.theme({
|
||||
"&": {
|
||||
fontSize: "9pt"
|
||||
}
|
||||
}),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
const doc = update.state.doc;
|
||||
const value = doc.toString();
|
||||
props.onChange(value);
|
||||
}
|
||||
if (update.focusChanged) {
|
||||
if (update.view.hasFocus) {
|
||||
props.onFocus();
|
||||
} else {
|
||||
props.onBlur();
|
||||
}
|
||||
}
|
||||
}),
|
||||
lintGutter(),
|
||||
linter((view: EditorView) => {
|
||||
const jsonErrors = jsonParseLinter()(view);
|
||||
if (jsonErrors.length > 0) {
|
||||
return jsonErrors;
|
||||
}
|
||||
return specificLinter(view);
|
||||
})
|
||||
],
|
||||
parent: props.parent,
|
||||
});
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
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};
|
||||
|
||||
|
||||
CodeMirror.defineMode("mgl", (config, parserConfig) => {
|
||||
// Just using the javascript mode with json enabled. Our logic is in the linter below.
|
||||
return CodeMirror.modes.javascript(
|
||||
{...config, json: true} as any,
|
||||
parserConfig
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
function tryToParse(text: string) {
|
||||
|
||||
const found: MarkerRangeWithMessage[] = [];
|
||||
try {
|
||||
parse(text);
|
||||
}
|
||||
catch(err: any) {
|
||||
|
||||
const errorMatch = err.toString().match(/line (\d+), column (\d+)/);
|
||||
if (errorMatch) {
|
||||
const loc = {
|
||||
first_line: parseInt(errorMatch[1], 10),
|
||||
first_column: parseInt(errorMatch[2], 10),
|
||||
last_line: parseInt(errorMatch[1], 10),
|
||||
last_column: parseInt(errorMatch[2], 10)
|
||||
};
|
||||
|
||||
// const loc = hash.loc;
|
||||
found.push({
|
||||
from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
|
||||
to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
|
||||
message: err
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return found;
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("lint", "json", (text: string) => {
|
||||
return tryToParse(text);
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) => {
|
||||
|
||||
const found: MarkerRangeWithMessage[] = tryToParse(text);
|
||||
|
||||
const {context} = opts;
|
||||
|
||||
if (found.length > 0) {
|
||||
// JSON invalid so don't go any further
|
||||
return found;
|
||||
}
|
||||
|
||||
const ast = jsonToAst(text);
|
||||
const input = JSON.parse(text);
|
||||
|
||||
function getArrayPositionalFromAst(node: any, path: string[]) {
|
||||
if (!node) {
|
||||
return undefined;
|
||||
}
|
||||
else if (path.length < 1) {
|
||||
return node;
|
||||
}
|
||||
else if (!node.children) {
|
||||
return undefined;
|
||||
}
|
||||
else {
|
||||
const key = path[0];
|
||||
let newNode;
|
||||
if (key.match(/^[0-9]+$/)) {
|
||||
newNode = node.children[path[0]];
|
||||
}
|
||||
else {
|
||||
newNode = node.children.find((childNode: any) => {
|
||||
return (
|
||||
childNode.key &&
|
||||
childNode.key.type === "Identifier" &&
|
||||
childNode.key.value === key
|
||||
);
|
||||
});
|
||||
if (newNode) {
|
||||
newNode = newNode.value;
|
||||
}
|
||||
}
|
||||
return getArrayPositionalFromAst(newNode, path.slice(1));
|
||||
}
|
||||
}
|
||||
|
||||
let out: ReturnType<typeof expression.createExpression> | null = null;
|
||||
if (context === "layer") {
|
||||
// Just an empty style so we can validate a layer.
|
||||
const errors = validateStyleMin({
|
||||
"version": 8,
|
||||
"name": "Empty Style",
|
||||
"metadata": {},
|
||||
"sources": {},
|
||||
"sprite": "",
|
||||
"glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
input
|
||||
]
|
||||
});
|
||||
|
||||
if (errors) {
|
||||
out = {
|
||||
result: "error",
|
||||
value: errors
|
||||
.filter(err => {
|
||||
// Remove missing 'layer source' errors, because we don't include them
|
||||
return !err.message.match(/^layers\[0\]: source ".*" not found$/);
|
||||
})
|
||||
.map(err => {
|
||||
// Remove the 'layers[0].' as we're validating the layer only here
|
||||
const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
|
||||
return {
|
||||
name: "",
|
||||
key: errMessageParts[0],
|
||||
message: errMessageParts[1],
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
else if (context === "expression") {
|
||||
out = expression.createExpression(input, opts.spec);
|
||||
}
|
||||
else {
|
||||
throw new Error(`Invalid context ${context}`);
|
||||
}
|
||||
|
||||
if (out?.result === "error") {
|
||||
const errors = out.value;
|
||||
errors.forEach(error => {
|
||||
const {key, message} = error;
|
||||
|
||||
if (!key) {
|
||||
const lastLineHandle = doc.getLineHandle(doc.lastLine());
|
||||
const err = {
|
||||
from: CodeMirror.Pos(doc.firstLine(), 0),
|
||||
to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
|
||||
message: message,
|
||||
};
|
||||
found.push(err);
|
||||
}
|
||||
else if (key) {
|
||||
const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
|
||||
const parsedError = getArrayPositionalFromAst(ast, path);
|
||||
if (!parsedError) {
|
||||
console.warn("Something went wrong parsing error:", error);
|
||||
return;
|
||||
}
|
||||
|
||||
const {loc} = parsedError;
|
||||
const {start, end} = loc;
|
||||
|
||||
found.push({
|
||||
from: CodeMirror.Pos(start.line - 1, start.column),
|
||||
to: CodeMirror.Pos(end.line - 1, end.column),
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return found;
|
||||
});
|
||||
67
src/libs/json-path-to-position.test.ts
Normal file
67
src/libs/json-path-to-position.test.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import jsonToAst from "json-to-ast";
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { jsonPathToPosition } from "./json-path-to-position";
|
||||
|
||||
describe("json-path-to-position", () => {
|
||||
it("should get position of a simple key", () => {
|
||||
const json = {
|
||||
"key1": "value1",
|
||||
"key2": "value2"
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["key1"], ast);
|
||||
expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"value1"');
|
||||
});
|
||||
|
||||
it("should get position of second key", () => {
|
||||
const json = {
|
||||
"key1": "value1",
|
||||
"key2": "value2"
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["key2"], ast);
|
||||
expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"value2"');
|
||||
});
|
||||
|
||||
it("should get position key in array", () => {
|
||||
const json = {
|
||||
"layers": [
|
||||
{
|
||||
"id": "layer1"
|
||||
}, {
|
||||
"id": "layer2"
|
||||
}
|
||||
]
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["layers", "1", "id"], ast);
|
||||
expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"layer2"');
|
||||
});
|
||||
|
||||
it("should return undefined when key does not exist", () => {
|
||||
const json = {
|
||||
"layers": [
|
||||
{
|
||||
"id": "layer1"
|
||||
}, {
|
||||
"id": "layer2"
|
||||
}
|
||||
]
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["layers", "2", "id"], ast);
|
||||
expect(node).toBe(undefined);
|
||||
});
|
||||
|
||||
it("should return undefined for value type", () => {
|
||||
const json = 1;
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["id"], ast);
|
||||
expect(node).toBe(undefined);
|
||||
});
|
||||
});
|
||||
25
src/libs/json-path-to-position.ts
Normal file
25
src/libs/json-path-to-position.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { type PropertyNode, type ValueNode } from "json-to-ast";
|
||||
|
||||
export function jsonPathToPosition(path: string[], node: ValueNode | PropertyNode | undefined,) {
|
||||
if (!node) {
|
||||
return undefined;
|
||||
}
|
||||
if (path.length < 1) {
|
||||
return node;
|
||||
}
|
||||
if (!("children" in node)) {
|
||||
return undefined;
|
||||
}
|
||||
const key = path[0];
|
||||
if (key.match(/^[0-9]+$/)) {
|
||||
return jsonPathToPosition(path.slice(1), node.children[+path[0]]);
|
||||
}
|
||||
const newNode = node.children.find((childNode) => {
|
||||
return (
|
||||
"key" in childNode &&
|
||||
childNode.key.type === "Identifier" &&
|
||||
childNode.key.value === key
|
||||
);
|
||||
}) as PropertyNode | undefined;
|
||||
return jsonPathToPosition(path.slice(1), newNode?.value);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
import {latest} from "@maplibre/maplibre-gl-style-spec";
|
||||
import { type LayerSpecification } from "maplibre-gl";
|
||||
|
||||
export function changeType(layer: LayerSpecification, newType: string) {
|
||||
|
||||
export function changeType(layer: LayerSpecification, newType: string): LayerSpecification {
|
||||
const changedPaintProps: LayerSpecification["paint"] = { ...layer.paint };
|
||||
Object.keys(changedPaintProps).forEach(propertyName => {
|
||||
if(!(propertyName in latest["paint_" + newType])) {
|
||||
@@ -20,8 +21,8 @@ export function changeType(layer: LayerSpecification, newType: string) {
|
||||
...layer,
|
||||
paint: changedPaintProps,
|
||||
layout: changedLayoutProps,
|
||||
type: newType,
|
||||
};
|
||||
type: newType
|
||||
} as LayerSpecification;
|
||||
}
|
||||
|
||||
/** A {@property} in either the paint our layout {@group} has changed
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
@use "vars";
|
||||
|
||||
.CodeMirror-lint-tooltip {
|
||||
z-index: 2000 !important;
|
||||
}
|
||||
|
||||
.codemirror-container {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cm-s-maputnik.CodeMirror {
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
|
||||
color: #8e8e8e;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cm-s-maputnik .CodeMirror-gutters {
|
||||
background: #212328;
|
||||
}
|
||||
|
||||
.cm-s-maputnik .CodeMirror-cursor {
|
||||
border-left: solid thin #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.cm-s-maputnik .CodeMirror-line::selection,
|
||||
.cm-s-maputnik .CodeMirror-line > span::selection,
|
||||
.cm-s-maputnik .CodeMirror-line > span > span::selection {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.cm-s-maputnik .CodeMirror-line::-moz-selection,
|
||||
.cm-s-maputnik .CodeMirror-line > span::-moz-selection,
|
||||
.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 {
|
||||
color: #8f9d6a;
|
||||
}
|
||||
.cm-s-maputnik span.cm-number { color: #91675f; }
|
||||
.cm-s-maputnik span.cm-property { color: #b8a077; }
|
||||
|
||||
.cm-s-maputnik .CodeMirror-activeline-background {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.cm-s-maputnik .CodeMirror-matchingbracket {
|
||||
background: hsla(223, 12%, 35%, 1);
|
||||
color: vars.$color-white !important;
|
||||
}
|
||||
|
||||
.cm-s-maputnik .CodeMirror-nonmatchingbracket {
|
||||
background-color: #bb0000;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@keyframes JSONEditor__animation-fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.JSONEditor__message {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 0.85em;
|
||||
z-index: 99999;
|
||||
padding: 0.3em 0.5em;
|
||||
background: hsla(0, 0%, 0%, 0.3);
|
||||
color: vars.$color-lowgray;
|
||||
border-bottom-left-radius: 2px;
|
||||
transition: opacity 320ms ease;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&--on {
|
||||
opacity: 1;
|
||||
animation: 320ms ease 0s JSONEditor__animation-fade;
|
||||
animation-delay: 2000ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,6 @@
|
||||
@use 'zoomproperty';
|
||||
@use 'popup';
|
||||
@use 'map';
|
||||
@use 'codemirror';
|
||||
@use 'react-collapse';
|
||||
|
||||
.maputnik-layout {
|
||||
|
||||
Reference in New Issue
Block a user