mirror of
https://github.com/maputnik/editor.git
synced 2026-02-05 20:20:02 +00:00
Refactor driver for E2E (#841)
Added shellygo package. Refactor driver and e2e tests. Added data-wd attributes to missing places. --------- Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>
This commit is contained in:
ShellyDCMS
GitHub
@@ -1,41 +1,39 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("accessibility", () => {
|
||||
// skipped due to the following issue with cypress: https://github.com/cypress-io/cypress/issues/299
|
||||
describe.skip("skip links", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
describe("skip links", () => {
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle("layer");
|
||||
when.setStyle("layer");
|
||||
});
|
||||
|
||||
|
||||
it("skip link to layer list", () => {
|
||||
const selector = driver.getDataAttribute("root:skip:layer-list");
|
||||
driver.isExists(selector);
|
||||
driver.typeKeys('{tab}');
|
||||
driver.isFocused(selector);
|
||||
driver.click(selector);
|
||||
|
||||
driver.isFocused("#skip-target-layer-list");
|
||||
const selector = "root:skip:layer-list";
|
||||
should.isExists(selector);
|
||||
when.tab();
|
||||
should.beFocused(selector);
|
||||
when.click(selector);
|
||||
should.beFocused("skip-target-layer-list");
|
||||
});
|
||||
|
||||
|
||||
it("skip link to layer editor", () => {
|
||||
const selector = driver.getDataAttribute("root:skip:layer-editor");
|
||||
driver.isExists(selector);
|
||||
driver.typeKeys('{tab}{tab}');
|
||||
driver.isFocused(selector);
|
||||
driver.click(selector);
|
||||
|
||||
driver.isFocused("#skip-target-layer-editor");
|
||||
const selector = "root:skip:layer-editor";
|
||||
should.isExists(selector);
|
||||
when.tab().tab();
|
||||
should.beFocused(selector);
|
||||
when.click(selector);
|
||||
should.beFocused("skip-target-layer-editor");
|
||||
});
|
||||
|
||||
|
||||
it("skip link to map view", () => {
|
||||
const selector = driver.getDataAttribute("root:skip:map-view");
|
||||
driver.isExists(selector);
|
||||
driver.typeKeys('{tab}{tab}{tab}');
|
||||
driver.isFocused(selector);
|
||||
driver.click(selector);
|
||||
|
||||
driver.isFocused(".maplibregl-canvas");
|
||||
const selector = "root:skip:map-view";
|
||||
should.isExists(selector);
|
||||
when.tab().tab().tab();
|
||||
should.beFocused(selector);
|
||||
when.click(selector);
|
||||
should.canvasBeFocused();
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,170 +1,198 @@
|
||||
import {v1 as uuid} from "uuid";
|
||||
import { CypressHelper } from "@shellygo/cypress-test-utils";
|
||||
import { v1 as uuid } from "uuid";
|
||||
export default class MaputnikDriver {
|
||||
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
|
||||
public beforeAndAfter = () => {
|
||||
beforeEach(() => {
|
||||
this.given.setupInterception();
|
||||
this.when.setStyle("both");
|
||||
});
|
||||
};
|
||||
|
||||
export default {
|
||||
isMac() {
|
||||
return Cypress.platform === "darwin";
|
||||
public given = {
|
||||
setupInterception: () => {
|
||||
cy.intercept("GET", "http://localhost:8888/example-style.json", {
|
||||
fixture: "example-style.json",
|
||||
}).as("example-style.json");
|
||||
cy.intercept("GET", "http://localhost:8888/example-layer-style.json", {
|
||||
fixture: "example-layer-style.json",
|
||||
});
|
||||
cy.intercept("GET", "http://localhost:8888/geojson-style.json", {
|
||||
fixture: "geojson-style.json",
|
||||
});
|
||||
cy.intercept("GET", "http://localhost:8888/raster-style.json", {
|
||||
fixture: "raster-style.json",
|
||||
});
|
||||
cy.intercept("GET", "http://localhost:8888/geojson-raster-style.json", {
|
||||
fixture: "geojson-raster-style.json",
|
||||
});
|
||||
cy.intercept({ method: "GET", url: "*example.local/*" }, []);
|
||||
cy.intercept({ method: "GET", url: "*example.com/*" }, []);
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach() {
|
||||
this.setupInterception();
|
||||
this.setStyle('both');
|
||||
public when = {
|
||||
within: (selector: string, fn: () => void) => {
|
||||
this.helper.when.within(fn, selector);
|
||||
},
|
||||
|
||||
setupInterception() {
|
||||
cy.intercept('GET', 'http://localhost:8888/example-style.json', { fixture: 'example-style.json' }).as('example-style.json');
|
||||
cy.intercept('GET', 'http://localhost:8888/example-layer-style.json', { fixture: 'example-layer-style.json' });
|
||||
cy.intercept('GET', 'http://localhost:8888/geojson-style.json', { fixture: 'geojson-style.json' });
|
||||
cy.intercept('GET', 'http://localhost:8888/raster-style.json', { fixture: 'raster-style.json' });
|
||||
cy.intercept('GET', 'http://localhost:8888/geojson-raster-style.json', { fixture: 'geojson-raster-style.json' });
|
||||
cy.intercept({method: 'GET', url: '*example.local/*' }, []);
|
||||
cy.intercept({method: 'GET', url: '*example.com/*' }, []);
|
||||
tab: () => cy.get("body").tab(),
|
||||
waitForExampleFileRequset: () => {
|
||||
this.helper.when.waitForResponse("example-style.json");
|
||||
},
|
||||
|
||||
setStyle(styleProperties: 'geojson' | 'raster' | 'both' | 'layer' | '', zoom? : number) {
|
||||
let url = "?debug";
|
||||
switch (styleProperties) {
|
||||
case "geojson":
|
||||
url += "&style=http://localhost:8888/geojson-style.json";
|
||||
break;
|
||||
case "raster":
|
||||
url += "&style=http://localhost:8888/raster-style.json";
|
||||
break;
|
||||
case "both":
|
||||
url += "&style=http://localhost:8888/geojson-raster-style.json";
|
||||
break;
|
||||
case "layer":
|
||||
url += "&style=http://localhost:8888/example-layer-style.json";
|
||||
break;
|
||||
}
|
||||
if (zoom) {
|
||||
url += "#" + zoom + "/41.3805/2.1635";
|
||||
}
|
||||
cy.visit("http://localhost:8888/" + url);
|
||||
if (styleProperties) {
|
||||
cy.on('window:confirm', () => true)
|
||||
}
|
||||
cy.get(".maputnik-toolbar-link").should("be.visible");
|
||||
},
|
||||
|
||||
getDataAttribute(key: string, selector?: string) {
|
||||
return `*[data-wd-key='${key}'] ${selector || ''}`;
|
||||
},
|
||||
|
||||
closeModal(key: string) {
|
||||
const selector = this.getDataAttribute(key);
|
||||
|
||||
this.isDisplayedInViewport(selector);
|
||||
|
||||
this.click(this.getDataAttribute(key + ".close-modal"));
|
||||
|
||||
this.doesNotExists(selector);
|
||||
},
|
||||
|
||||
openLayersModal() {
|
||||
cy.get(this.getDataAttribute('layer-list:add-layer')).click();
|
||||
|
||||
cy.get(this.getDataAttribute('modal:add-layer')).should('exist');
|
||||
cy.get(this.getDataAttribute('modal:add-layer')).should('be.visible');
|
||||
},
|
||||
|
||||
getStyleFromWindow(win: Window) {
|
||||
const styleId = win.localStorage.getItem("maputnik:latest_style");
|
||||
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`)
|
||||
const obj = JSON.parse(styleItem || "");
|
||||
return obj;
|
||||
},
|
||||
|
||||
isStyleStoreEqual(getter: (obj:any) => any, styleObj: any) {
|
||||
cy.window().then((win: any) => {
|
||||
const obj = this.getStyleFromWindow(win);
|
||||
assert.deepEqual(getter(obj), styleObj);
|
||||
});
|
||||
},
|
||||
|
||||
isStyleStoreEqualToExampleFileData() {
|
||||
cy.window().then((win: any) => {
|
||||
const obj = this.getStyleFromWindow(win);
|
||||
cy.fixture('example-style.json').should('deep.equal', obj);
|
||||
});
|
||||
},
|
||||
|
||||
fillLayersModal(opts: any) {
|
||||
var type = opts.type;
|
||||
var layer = opts.layer;
|
||||
var id;
|
||||
if(opts.id) {
|
||||
id = opts.id
|
||||
}
|
||||
else {
|
||||
id = `${type}:${uuid()}`;
|
||||
}
|
||||
|
||||
cy.get(this.getDataAttribute('add-layer.layer-type', "select")).select(type);
|
||||
cy.get(this.getDataAttribute("add-layer.layer-id", "input")).type(id);
|
||||
if(layer) {
|
||||
cy.get(this.getDataAttribute("add-layer.layer-source-block", "input")).type(layer);
|
||||
}
|
||||
cy.get(this.getDataAttribute("add-layer")).click();
|
||||
|
||||
return id;
|
||||
},
|
||||
|
||||
typeKeys(keys: string) {
|
||||
cy.get('body').type(keys);
|
||||
},
|
||||
|
||||
click(selector: string) {
|
||||
cy.get(selector).click();
|
||||
},
|
||||
|
||||
select(selector: string, value: string) {
|
||||
cy.get(selector).select(value);
|
||||
},
|
||||
|
||||
isSelected(selector: string, value: string) {
|
||||
cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
|
||||
},
|
||||
|
||||
|
||||
focus(selector: string) {
|
||||
cy.get(selector).focus();
|
||||
},
|
||||
|
||||
isFocused(selector: string) {
|
||||
cy.get(selector).should('have.focus');
|
||||
},
|
||||
|
||||
isDisplayedInViewport(selector: string) {
|
||||
cy.get(selector).should('be.visible');
|
||||
},
|
||||
|
||||
isNotDisplayedInViewport(selector: string) {
|
||||
cy.get(selector).should('not.be.visible');
|
||||
},
|
||||
|
||||
setValue(selector: string, text: string) {
|
||||
cy.get(selector).clear().type(text, {parseSpecialCharSequences: false});
|
||||
},
|
||||
|
||||
isExists(selector: string) {
|
||||
cy.get(selector).should('exist');
|
||||
},
|
||||
|
||||
doesNotExists(selector: string) {
|
||||
cy.get(selector).should('not.exist');
|
||||
},
|
||||
|
||||
chooseExampleFile() {
|
||||
cy.get("input[type='file']").selectFile('cypress/fixtures/example-style.json', {force: true});
|
||||
},
|
||||
|
||||
getExampleFileUrl() {
|
||||
return "http://localhost:8888/example-style.json";
|
||||
},
|
||||
|
||||
waitForExampleFileRequset() {
|
||||
cy.wait('@example-style.json');
|
||||
chooseExampleFile: () => {
|
||||
cy.get("input[type='file']").selectFile(
|
||||
"cypress/fixtures/example-style.json",
|
||||
{ force: true }
|
||||
);
|
||||
},
|
||||
setStyle: (
|
||||
styleProperties: "geojson" | "raster" | "both" | "layer" | "",
|
||||
zoom?: number
|
||||
) => {
|
||||
let url = "?debug";
|
||||
switch (styleProperties) {
|
||||
case "geojson":
|
||||
url += "&style=http://localhost:8888/geojson-style.json";
|
||||
break;
|
||||
case "raster":
|
||||
url += "&style=http://localhost:8888/raster-style.json";
|
||||
break;
|
||||
case "both":
|
||||
url += "&style=http://localhost:8888/geojson-raster-style.json";
|
||||
break;
|
||||
case "layer":
|
||||
url += "&style=http://localhost:8888/example-layer-style.json";
|
||||
break;
|
||||
}
|
||||
if (zoom) {
|
||||
url += "#" + zoom + "/41.3805/2.1635";
|
||||
}
|
||||
cy.visit("http://localhost:8888/" + url);
|
||||
if (styleProperties) {
|
||||
cy.on("window:confirm", () => true);
|
||||
}
|
||||
cy.get(".maputnik-toolbar-link").should("be.visible");
|
||||
},
|
||||
fillLayersModal: (opts: any) => {
|
||||
var type = opts.type;
|
||||
var layer = opts.layer;
|
||||
var id;
|
||||
if (opts.id) {
|
||||
id = opts.id;
|
||||
} else {
|
||||
id = `${type}:${uuid()}`;
|
||||
}
|
||||
|
||||
cy.get(
|
||||
this.get.getDataAttribute("add-layer.layer-type", "select")
|
||||
).select(type);
|
||||
cy.get(this.get.getDataAttribute("add-layer.layer-id", "input")).type(id);
|
||||
if (layer) {
|
||||
cy.get(
|
||||
this.get.getDataAttribute("add-layer.layer-source-block", "input")
|
||||
).type(layer);
|
||||
}
|
||||
this.when.click("add-layer");
|
||||
|
||||
return id;
|
||||
},
|
||||
|
||||
typeKeys: (keys: string) => {
|
||||
cy.get("body").type(keys);
|
||||
},
|
||||
|
||||
click: (selector: string) => {
|
||||
this.helper.when.click(selector);
|
||||
// cy.get(selector).click({ force: true });
|
||||
},
|
||||
|
||||
select: (selector: string, value: string) => {
|
||||
cy.get(selector).select(value);
|
||||
},
|
||||
|
||||
focus: (selector: string) => {
|
||||
this.helper.when.focus(selector);
|
||||
},
|
||||
|
||||
setValue: (selector: string, text: string) => {
|
||||
cy.get(selector).clear().type(text, { parseSpecialCharSequences: false });
|
||||
},
|
||||
|
||||
closeModal: (key: string) => {
|
||||
this.helper.when.waitUntil(() => this.helper.get.element(key));
|
||||
this.when.click(key + ".close-modal");
|
||||
},
|
||||
|
||||
openLayersModal: () => {
|
||||
this.helper.when.click("layer-list:add-layer");
|
||||
|
||||
cy.get(this.get.getDataAttribute("modal:add-layer")).should("exist");
|
||||
cy.get(this.get.getDataAttribute("modal:add-layer")).should("be.visible");
|
||||
},
|
||||
};
|
||||
|
||||
public get = {
|
||||
isMac: () => {
|
||||
return Cypress.platform === "darwin";
|
||||
},
|
||||
getStyleFromWindow: (win: Window) => {
|
||||
const styleId = win.localStorage.getItem("maputnik:latest_style");
|
||||
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
|
||||
const obj = JSON.parse(styleItem || "");
|
||||
return obj;
|
||||
},
|
||||
getExampleFileUrl: () => {
|
||||
return "http://localhost:8888/example-style.json";
|
||||
},
|
||||
getDataAttribute: (key: string, selector?: string): string => {
|
||||
return `*[data-wd-key='${key}'] ${selector || ""}`;
|
||||
},
|
||||
};
|
||||
|
||||
public should = {
|
||||
canvasBeFocused: () => {
|
||||
this.when.within("maplibre:map", () => {
|
||||
cy.get("canvas").should("be.focused");
|
||||
});
|
||||
},
|
||||
notExist: (selector: string) => {
|
||||
cy.get(selector).should("not.exist");
|
||||
},
|
||||
beFocused: (selector: string) => {
|
||||
this.helper.get.element(selector).should("have.focus");
|
||||
},
|
||||
|
||||
notBeFocused: (selector: string) => {
|
||||
this.helper.get.element(selector).should("not.have.focus");
|
||||
},
|
||||
|
||||
beVisible: (selector: string) => {
|
||||
this.helper.get.element(selector).should("be.visible");
|
||||
},
|
||||
|
||||
notBeVisible: (selector: string) => {
|
||||
this.helper.get.element(selector).should("not.be.visible");
|
||||
},
|
||||
|
||||
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
|
||||
cy.window().then((win: any) => {
|
||||
const obj = this.get.getStyleFromWindow(win);
|
||||
assert.deepEqual(getter(obj), styleObj);
|
||||
});
|
||||
},
|
||||
|
||||
isStyleStoreEqualToExampleFileData: () => {
|
||||
cy.window().then((win: any) => {
|
||||
const obj = this.get.getStyleFromWindow(win);
|
||||
cy.fixture("example-style.json").should("deep.equal", obj);
|
||||
});
|
||||
},
|
||||
|
||||
isExists: (selector: string) => {
|
||||
this.helper.get.element(selector).should("exist");
|
||||
},
|
||||
isSelected: (selector: string, value: string) => {
|
||||
cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,80 +1,97 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("history", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
let undoKeyCombo: string;
|
||||
let redoKeyCombo: string;
|
||||
|
||||
before(() => {
|
||||
const isMac = driver.isMac();
|
||||
undoKeyCombo = isMac ? '{meta}z' : '{ctrl}z';
|
||||
redoKeyCombo = isMac ? '{meta}{shift}z' : '{ctrl}y';
|
||||
driver.beforeEach();
|
||||
const isMac = get.isMac();
|
||||
undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
|
||||
redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
|
||||
});
|
||||
|
||||
it("undo/redo", () => {
|
||||
driver.setStyle('geojson');
|
||||
driver.openLayersModal();
|
||||
when.setStyle("geojson");
|
||||
when.openLayersModal();
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, []);
|
||||
should.equalStyleStore((a: any) => a.layers, []);
|
||||
|
||||
driver.fillLayersModal({
|
||||
when.fillLayersModal({
|
||||
id: "step 1",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "step 2",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
},
|
||||
{
|
||||
"id": "step 2",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.typeKeys(undoKeyCombo);
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
when.typeKeys(undoKeyCombo);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.typeKeys(undoKeyCombo)
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, []);
|
||||
when.typeKeys(undoKeyCombo);
|
||||
should.equalStyleStore((a: any) => a.layers, []);
|
||||
|
||||
driver.typeKeys(redoKeyCombo)
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
when.typeKeys(redoKeyCombo);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.typeKeys(redoKeyCombo)
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
},
|
||||
{
|
||||
"id": "step 2",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
when.typeKeys(redoKeyCombo);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,60 +1,61 @@
|
||||
import driver from "./driver";
|
||||
import { default as MaputnikDriver } from "./driver";
|
||||
|
||||
describe("keyboard", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
describe("shortcuts", () => {
|
||||
beforeEach(() => {
|
||||
driver.setupInterception();
|
||||
driver.setStyle('');
|
||||
})
|
||||
given.setupInterception();
|
||||
when.setStyle("");
|
||||
});
|
||||
|
||||
it("ESC should unfocus", () => {
|
||||
const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
|
||||
driver.focus(targetSelector);
|
||||
driver.isFocused(targetSelector);
|
||||
const targetSelector = "maputnik-select";
|
||||
when.focus(targetSelector);
|
||||
should.beFocused(targetSelector);
|
||||
|
||||
//driver.typeKeys("{esc}");
|
||||
//driver.isFocused('body');
|
||||
when.typeKeys("{esc}");
|
||||
expect(should.notBeFocused(targetSelector));
|
||||
});
|
||||
|
||||
it("'?' should show shortcuts modal", () => {
|
||||
driver.typeKeys("?");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
|
||||
when.typeKeys("?");
|
||||
should.beVisible("modal:shortcuts");
|
||||
});
|
||||
|
||||
it("'o' should show open modal", () => {
|
||||
driver.typeKeys("o");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:open"));
|
||||
when.typeKeys("o");
|
||||
should.beVisible("modal:open");
|
||||
});
|
||||
|
||||
it("'e' should show export modal", () => {
|
||||
driver.typeKeys("e");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:export"));
|
||||
when.typeKeys("e");
|
||||
should.beVisible("modal:export");
|
||||
});
|
||||
|
||||
it("'d' should show sources modal", () => {
|
||||
driver.typeKeys("d");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources"));
|
||||
when.typeKeys("d");
|
||||
should.beVisible("modal:sources");
|
||||
});
|
||||
|
||||
it("'s' should show settings modal", () => {
|
||||
driver.typeKeys("s");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings"));
|
||||
when.typeKeys("s");
|
||||
should.beVisible("modal:settings");
|
||||
});
|
||||
|
||||
it("'i' should change map to inspect mode", () => {
|
||||
driver.typeKeys("i");
|
||||
driver.isSelected(driver.getDataAttribute("nav:inspect"), "inspect");
|
||||
when.typeKeys("i");
|
||||
should.isSelected(get.getDataAttribute("nav:inspect"), "inspect");
|
||||
});
|
||||
|
||||
it("'m' should focus map", () => {
|
||||
driver.typeKeys("m");
|
||||
driver.isFocused(".maplibregl-canvas");
|
||||
when.typeKeys("m");
|
||||
should.beFocused(".maplibregl-canvas");
|
||||
});
|
||||
|
||||
it("'!' should show debug modal", () => {
|
||||
driver.typeKeys("!");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug"));
|
||||
when.typeKeys("!");
|
||||
should.beVisible("modal:debug");
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -1,112 +1,132 @@
|
||||
var assert = require("assert");
|
||||
import driver from "./driver";
|
||||
import { v1 as uuid } from 'uuid';
|
||||
import { v1 as uuid } from "uuid";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("layers", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle('both');
|
||||
driver.openLayersModal();
|
||||
when.setStyle("both");
|
||||
when.openLayersModal();
|
||||
});
|
||||
|
||||
describe("ops", () => {
|
||||
it("delete", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
|
||||
when.click("layer-list-item:" + id + ":delete");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, []);
|
||||
should.equalStyleStore((a: any) => a.layers, []);
|
||||
});
|
||||
|
||||
it("duplicate", () => {
|
||||
var styleObj;
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
|
||||
when.click("layer-list-item:" + id + ":copy");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id+"-copy",
|
||||
"type": "background"
|
||||
},
|
||||
{
|
||||
"id": id,
|
||||
"type": "background"
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id + "-copy",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it("hide", () => {
|
||||
var styleObj;
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
|
||||
when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "background",
|
||||
"layout": {
|
||||
"visibility": "none"
|
||||
}
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
layout: {
|
||||
visibility: "none",
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
|
||||
when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "background",
|
||||
"layout": {
|
||||
"visibility": "visible"
|
||||
}
|
||||
},
|
||||
]);
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe('background', () => {
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("background", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
describe("modify", () => {
|
||||
@@ -114,17 +134,26 @@ describe("layers", () => {
|
||||
// Setup
|
||||
var id = uuid();
|
||||
|
||||
driver.select(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
|
||||
driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
|
||||
when.select(
|
||||
get.getDataAttribute("add-layer.layer-type", "select"),
|
||||
"background"
|
||||
);
|
||||
when.setValue(
|
||||
get.getDataAttribute("add-layer.layer-id", "input"),
|
||||
"background:" + id
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("add-layer"));
|
||||
when.click("add-layer");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
return id;
|
||||
}
|
||||
|
||||
@@ -134,35 +163,47 @@ describe("layers", () => {
|
||||
it("id", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
var id = uuid();
|
||||
driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
|
||||
driver.click(driver.getDataAttribute("min-zoom"));
|
||||
when.setValue(
|
||||
get.getDataAttribute("layer-editor.layer-id", "input"),
|
||||
"foobar:" + id
|
||||
);
|
||||
when.click("min-zoom");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'foobar:'+id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "foobar:" + id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it("min-zoom", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), "1");
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue(
|
||||
get.getDataAttribute("min-zoom", 'input[type="text"]'),
|
||||
"1"
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
when.click("layer-editor.layer-id");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
"minzoom": 1
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
// AND RESET!
|
||||
// driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
|
||||
@@ -179,38 +220,47 @@ describe("layers", () => {
|
||||
it("max-zoom", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), "1")
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue(
|
||||
get.getDataAttribute("max-zoom", 'input[type="text"]'),
|
||||
"1"
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
when.click("layer-editor.layer-id");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
"maxzoom": 1
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
maxzoom: 1,
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it("comments", () => {
|
||||
var bgId = createBackground();
|
||||
var id = uuid();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue(get.getDataAttribute("layer-comment", "textarea"), id);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
when.click("layer-editor.layer-id");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
metadata: {
|
||||
'maputnik:comment': id
|
||||
}
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
metadata: {
|
||||
"maputnik:comment": id,
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
// Unset it again.
|
||||
// TODO: This fails
|
||||
@@ -228,31 +278,33 @@ describe("layers", () => {
|
||||
it("color", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
|
||||
when.click("spec-field:background-color");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
|
||||
})
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("filter", () => {
|
||||
it("expand/collapse");
|
||||
it("compound filter");
|
||||
})
|
||||
});
|
||||
|
||||
describe("paint", () => {
|
||||
it("expand/collapse");
|
||||
it("color");
|
||||
it("pattern");
|
||||
it("opacity");
|
||||
})
|
||||
});
|
||||
// <=====
|
||||
|
||||
describe("json-editor", () => {
|
||||
@@ -263,165 +315,183 @@ describe("layers", () => {
|
||||
it.skip("parse error", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
var errorSelector = ".CodeMirror-lint-marker-error";
|
||||
driver.doesNotExists(errorSelector);
|
||||
should.notExist(errorSelector);
|
||||
|
||||
driver.click(".CodeMirror");
|
||||
driver.typeKeys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
|
||||
driver.isExists(errorSelector);
|
||||
when.click(".CodeMirror");
|
||||
when.typeKeys(
|
||||
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
|
||||
);
|
||||
should.isExists(errorSelector);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id"));
|
||||
when.click("layer-editor.layer-id");
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe('fill', () => {
|
||||
describe("fill", () => {
|
||||
it("add", () => {
|
||||
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "fill",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'fill',
|
||||
"source": "example"
|
||||
}
|
||||
]);
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "fill",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
// TODO: Change source
|
||||
it("change source")
|
||||
it("change source");
|
||||
});
|
||||
|
||||
describe('line', () => {
|
||||
describe("line", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "line",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "line",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "line",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it("groups", () => {
|
||||
// TODO
|
||||
// Click each of the layer groups.
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe('symbol', () => {
|
||||
describe("symbol", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "symbol",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "symbol",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "symbol",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('raster', () => {
|
||||
describe("raster", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "raster",
|
||||
layer: "raster"
|
||||
layer: "raster",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "raster",
|
||||
"source": "raster",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "raster",
|
||||
source: "raster",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('circle', () => {
|
||||
describe("circle", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "circle",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "circle",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "circle",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('fill extrusion', () => {
|
||||
describe("fill extrusion", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "fill-extrusion",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'fill-extrusion',
|
||||
"source": "example"
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "fill-extrusion",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("groups", () => {
|
||||
it("simple", () => {
|
||||
driver.setStyle("geojson");
|
||||
when.setStyle("geojson");
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "foo",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "foo_bar",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "foo_bar_baz",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
|
||||
driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
|
||||
driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
|
||||
should.beVisible("layer-list-item:foo");
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
|
||||
should.notBeVisible("layer-list-item:foo_bar");
|
||||
should.notBeVisible("layer-list-item:foo_bar_baz");
|
||||
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
|
||||
})
|
||||
})
|
||||
when.click("layer-list-group:foo-0");
|
||||
|
||||
should.beVisible("layer-list-item:foo");
|
||||
should.beVisible("layer-list-item:foo_bar");
|
||||
should.beVisible("layer-list-item:foo_bar_baz");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("map", () => {
|
||||
describe("zoom level", () => {
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
});
|
||||
it("via url", () => {
|
||||
var zoomLevel = 12.37;
|
||||
driver.setStyle("geojson", zoomLevel);
|
||||
driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
|
||||
// HM TODO
|
||||
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
|
||||
})
|
||||
it("via map controls", () => {
|
||||
var zoomLevel = 12.37;
|
||||
driver.setStyle("geojson", zoomLevel);
|
||||
|
||||
driver.click(".maplibregl-ctrl-zoom-in");
|
||||
driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
|
||||
// HM TODO
|
||||
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
|
||||
})
|
||||
})
|
||||
})
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
describe("zoom level", () => {
|
||||
it("via url", () => {
|
||||
var zoomLevel = 12.37;
|
||||
when.setStyle("geojson", zoomLevel);
|
||||
should.beVisible("maplibre:ctrl-zoom");
|
||||
// HM TODO
|
||||
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
|
||||
});
|
||||
|
||||
it("via map controls", () => {
|
||||
var zoomLevel = 12.37;
|
||||
when.setStyle("geojson", zoomLevel);
|
||||
|
||||
when.click("maplibre:ctrl-zoom");
|
||||
should.beVisible("maplibre:ctrl-zoom");
|
||||
// HM TODO
|
||||
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,137 +1,160 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("modals", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle('');
|
||||
when.setStyle("");
|
||||
});
|
||||
describe("open", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:open"));
|
||||
when.click("nav:open");
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
driver.closeModal("modal:open");
|
||||
when.closeModal("modal:open");
|
||||
should.notExist("modal:open");
|
||||
});
|
||||
|
||||
it.skip("upload", () => {
|
||||
// HM: I was not able to make the following choose file actually to select a file and close the modal...
|
||||
driver.chooseExampleFile();
|
||||
when.chooseExampleFile();
|
||||
|
||||
driver.isStyleStoreEqualToExampleFileData();
|
||||
should.isStyleStoreEqualToExampleFileData();
|
||||
});
|
||||
|
||||
it("load from url", () => {
|
||||
var styleFileUrl = driver.getExampleFileUrl();
|
||||
var styleFileUrl = get.getExampleFileUrl();
|
||||
|
||||
driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
|
||||
driver.click(driver.getDataAttribute("modal:open.url.button"))
|
||||
driver.waitForExampleFileRequset();
|
||||
when.setValue(get.getDataAttribute("modal:open.url.input"), styleFileUrl);
|
||||
when.click("modal:open.url.button");
|
||||
when.waitForExampleFileRequset();
|
||||
|
||||
driver.isStyleStoreEqualToExampleFileData();
|
||||
should.isStyleStoreEqualToExampleFileData();
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
describe("shortcuts", () => {
|
||||
it("open/close", () => {
|
||||
driver.setStyle('');
|
||||
|
||||
driver.typeKeys("?");
|
||||
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
|
||||
|
||||
driver.closeModal("modal:shortcuts");
|
||||
when.setStyle("");
|
||||
when.typeKeys("?");
|
||||
when.closeModal("modal:shortcuts");
|
||||
should.notExist("modal:shortcuts");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("export", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:export"));
|
||||
when.click("nav:export");
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
driver.closeModal("modal:export");
|
||||
when.closeModal("modal:export");
|
||||
should.notExist("modal:export");
|
||||
});
|
||||
|
||||
// TODO: Work out how to download a file and check the contents
|
||||
it("download")
|
||||
|
||||
})
|
||||
it("download");
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
it("active sources")
|
||||
it("public source")
|
||||
it("add new source")
|
||||
})
|
||||
it("active sources");
|
||||
it("public source");
|
||||
it("add new source");
|
||||
});
|
||||
|
||||
describe("inspect", () => {
|
||||
it("toggle", () => {
|
||||
driver.setStyle('geojson');
|
||||
when.setStyle("geojson");
|
||||
|
||||
driver.select(driver.getDataAttribute("nav:inspect", "select"), "inspect");
|
||||
})
|
||||
})
|
||||
when.select(get.getDataAttribute("nav:inspect", "select"), "inspect");
|
||||
});
|
||||
});
|
||||
|
||||
describe("style settings", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:settings"));
|
||||
when.click("nav:settings");
|
||||
});
|
||||
|
||||
it("name", () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
|
||||
driver.click(driver.getDataAttribute("modal:settings.owner"));
|
||||
when.setValue(get.getDataAttribute("modal:settings.name"), "foobar");
|
||||
when.click("modal:settings.owner");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.name, "foobar");
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.name, "foobar");
|
||||
});
|
||||
it("owner", () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
when.setValue(get.getDataAttribute("modal:settings.owner"), "foobar");
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.owner, "foobar");
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.owner, "foobar");
|
||||
});
|
||||
it("sprite url", () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
when.setValue(
|
||||
get.getDataAttribute("modal:settings.sprite"),
|
||||
"http://example.com"
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.sprite, "http://example.com");
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.sprite, "http://example.com");
|
||||
});
|
||||
it("glyphs url", () => {
|
||||
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
|
||||
when.setValue(get.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.glyphs, glyphsUrl);
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
|
||||
});
|
||||
|
||||
it("maptiler access token", () => {
|
||||
var apiKey = "testing123";
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
when.setValue(
|
||||
get.getDataAttribute(
|
||||
"modal:settings.maputnik:openmaptiles_access_token"
|
||||
),
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:openmaptiles_access_token"], apiKey);
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(obj) => obj.metadata["maputnik:openmaptiles_access_token"],
|
||||
apiKey
|
||||
);
|
||||
});
|
||||
|
||||
it("thunderforest access token", () => {
|
||||
var apiKey = "testing123";
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
when.setValue(
|
||||
get.getDataAttribute(
|
||||
"modal:settings.maputnik:thunderforest_access_token"
|
||||
),
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:thunderforest_access_token"], apiKey);
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(obj) => obj.metadata["maputnik:thunderforest_access_token"],
|
||||
apiKey
|
||||
);
|
||||
});
|
||||
|
||||
it("style renderer", () => {
|
||||
cy.on('uncaught:exception', () => false); // this is due to the fact that this is an invalid style for openlayers
|
||||
driver.select(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
|
||||
driver.isSelected(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
|
||||
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
|
||||
when.select(
|
||||
get.getDataAttribute("modal:settings.maputnik:renderer"),
|
||||
"ol"
|
||||
);
|
||||
should.isSelected(
|
||||
get.getDataAttribute("modal:settings.maputnik:renderer"),
|
||||
"ol"
|
||||
);
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:renderer"], "ol");
|
||||
})
|
||||
})
|
||||
when.click("modal:settings.name");
|
||||
|
||||
should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
|
||||
});
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
it("toggle")
|
||||
})
|
||||
})
|
||||
it("toggle");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
import "cypress-plugin-tab";
|
||||
import "./commands";
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
// require('./commands')
|
||||
|
||||
6245
package-lock.json
generated
6245
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -86,6 +86,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-replace": "^5.0.5",
|
||||
"@shellygo/cypress-test-utils": "^2.0.9",
|
||||
"@storybook/addon-a11y": "^7.6.5",
|
||||
"@storybook/addon-actions": "^7.6.5",
|
||||
"@storybook/addon-links": "^7.6.5",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,24 +1,33 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classnames from 'classnames'
|
||||
import {detect} from 'detect-browser';
|
||||
import classnames from "classnames";
|
||||
import { detect } from "detect-browser";
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
|
||||
import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
|
||||
import pkgJson from '../../package.json'
|
||||
import {
|
||||
MdAssignmentTurnedIn,
|
||||
MdFileDownload,
|
||||
MdFindInPage,
|
||||
MdHelpOutline,
|
||||
MdLayers,
|
||||
MdOpenInBrowser,
|
||||
MdSettings,
|
||||
} from "react-icons/md";
|
||||
|
||||
import logoImage from "maputnik-design/logos/logo-color.svg";
|
||||
import pkgJson from "../../package.json";
|
||||
|
||||
// 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;
|
||||
|
||||
class IconText extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return <span className="maputnik-icon-text">{this.props.children}</span>
|
||||
return <span className="maputnik-icon-text">{this.props.children}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,17 +37,19 @@ class ToolbarLink extends React.Component {
|
||||
children: PropTypes.node,
|
||||
href: PropTypes.string,
|
||||
onToggleModal: PropTypes.func,
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return <a
|
||||
className={classnames('maputnik-toolbar-link', this.props.className)}
|
||||
href={this.props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{this.props.children}
|
||||
</a>
|
||||
return (
|
||||
<a
|
||||
className={classnames("maputnik-toolbar-link", this.props.className)}
|
||||
href={this.props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{this.props.children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,36 +58,41 @@ class ToolbarLinkHighlighted extends React.Component {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
href: PropTypes.string,
|
||||
onToggleModal: PropTypes.func
|
||||
}
|
||||
onToggleModal: PropTypes.func,
|
||||
};
|
||||
|
||||
render() {
|
||||
return <a
|
||||
className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
|
||||
href={this.props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="maputnik-toolbar-link-wrapper">
|
||||
{this.props.children}
|
||||
</span>
|
||||
</a>
|
||||
return (
|
||||
<a
|
||||
className={classnames(
|
||||
"maputnik-toolbar-link",
|
||||
"maputnik-toolbar-link--highlighted",
|
||||
this.props.className
|
||||
)}
|
||||
href={this.props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="maputnik-toolbar-link-wrapper">
|
||||
{this.props.children}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ToolbarSelect extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
wdKey: PropTypes.string
|
||||
}
|
||||
wdKey: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
return <div
|
||||
className='maputnik-toolbar-select'
|
||||
data-wd-key={this.props.wdKey}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
return (
|
||||
<div className="maputnik-toolbar-select" data-wd-key={this.props.wdKey}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,17 +100,19 @@ class ToolbarAction extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClick: PropTypes.func,
|
||||
wdKey: PropTypes.string
|
||||
}
|
||||
wdKey: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
return <button
|
||||
className='maputnik-toolbar-action'
|
||||
data-wd-key={this.props.wdKey}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{this.props.children}
|
||||
</button>
|
||||
return (
|
||||
<button
|
||||
className="maputnik-toolbar-action"
|
||||
data-wd-key={this.props.wdKey}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{this.props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,7 +130,7 @@ export default class AppToolbar extends React.Component {
|
||||
onSetMapState: PropTypes.func,
|
||||
mapState: PropTypes.string,
|
||||
renderer: PropTypes.string,
|
||||
}
|
||||
};
|
||||
|
||||
state = {
|
||||
isOpen: {
|
||||
@@ -121,8 +139,8 @@ export default class AppToolbar extends React.Component {
|
||||
open: false,
|
||||
add: false,
|
||||
export: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
handleSelection(val) {
|
||||
this.props.onSetMapState(val);
|
||||
@@ -131,12 +149,11 @@ export default class AppToolbar extends React.Component {
|
||||
onSkip = (target) => {
|
||||
if (target === "map") {
|
||||
document.querySelector(".maplibregl-canvas").focus();
|
||||
}
|
||||
else {
|
||||
const el = document.querySelector("#skip-target-"+target);
|
||||
} else {
|
||||
const el = document.querySelector("#skip-target-" + target);
|
||||
el.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const views = [
|
||||
@@ -149,7 +166,7 @@ export default class AppToolbar extends React.Component {
|
||||
id: "inspect",
|
||||
group: "general",
|
||||
title: "Inspect",
|
||||
disabled: this.props.renderer === 'ol',
|
||||
disabled: this.props.renderer === "ol",
|
||||
},
|
||||
{
|
||||
id: "filter-deuteranopia",
|
||||
@@ -181,102 +198,137 @@ export default class AppToolbar extends React.Component {
|
||||
return view.id === this.props.mapState;
|
||||
});
|
||||
|
||||
return <nav className='maputnik-toolbar'>
|
||||
<div className="maputnik-toolbar__inner">
|
||||
<div
|
||||
className="maputnik-toolbar-logo-container"
|
||||
>
|
||||
{/* Keyboard accessible quick links */}
|
||||
<button
|
||||
data-wd-key="root:skip:layer-list"
|
||||
className="maputnik-toolbar-skip"
|
||||
onClick={e => this.onSkip("layer-list")}
|
||||
return (
|
||||
<nav className="maputnik-toolbar">
|
||||
<div className="maputnik-toolbar__inner">
|
||||
<div className="maputnik-toolbar-logo-container">
|
||||
{/* Keyboard accessible quick links */}
|
||||
<button
|
||||
data-wd-key="root:skip:layer-list"
|
||||
className="maputnik-toolbar-skip"
|
||||
onClick={(e) => this.onSkip("layer-list")}
|
||||
>
|
||||
Layers list
|
||||
</button>
|
||||
<button
|
||||
data-wd-key="root:skip:layer-editor"
|
||||
className="maputnik-toolbar-skip"
|
||||
onClick={(e) => this.onSkip("layer-editor")}
|
||||
>
|
||||
Layer editor
|
||||
</button>
|
||||
<button
|
||||
data-wd-key="root:skip:map-view"
|
||||
className="maputnik-toolbar-skip"
|
||||
onClick={(e) => this.onSkip("map")}
|
||||
>
|
||||
Map view
|
||||
</button>
|
||||
<a
|
||||
className="maputnik-toolbar-logo"
|
||||
target="blank"
|
||||
rel="noreferrer noopener"
|
||||
href="https://github.com/maputnik/editor"
|
||||
>
|
||||
<span dangerouslySetInnerHTML={{ __html: logoImage }} />
|
||||
<h1>
|
||||
<span className="maputnik-toolbar-name">{pkgJson.name}</span>
|
||||
<span className="maputnik-toolbar-version">
|
||||
v{pkgJson.version}
|
||||
</span>
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="maputnik-toolbar__actions"
|
||||
role="navigation"
|
||||
aria-label="Toolbar"
|
||||
>
|
||||
Layers list
|
||||
</button>
|
||||
<button
|
||||
data-wd-key="root:skip:layer-editor"
|
||||
className="maputnik-toolbar-skip"
|
||||
onClick={e => this.onSkip("layer-editor")}
|
||||
>
|
||||
Layer editor
|
||||
</button>
|
||||
<button
|
||||
data-wd-key="root:skip:map-view"
|
||||
className="maputnik-toolbar-skip"
|
||||
onClick={e => this.onSkip("map")}
|
||||
>
|
||||
Map view
|
||||
</button>
|
||||
<a
|
||||
className="maputnik-toolbar-logo"
|
||||
target="blank"
|
||||
rel="noreferrer noopener"
|
||||
href="https://github.com/maputnik/editor"
|
||||
>
|
||||
<img src="node_modules/maputnik-design/logos/logo-color.svg" />
|
||||
<h1>
|
||||
<span className="maputnik-toolbar-name">{pkgJson.name}</span>
|
||||
<span className="maputnik-toolbar-version">v{pkgJson.version}</span>
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
|
||||
<ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
|
||||
<MdOpenInBrowser />
|
||||
<IconText>Open</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
|
||||
<MdFileDownload />
|
||||
<IconText>Export</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
|
||||
<MdLayers />
|
||||
<IconText>Data Sources</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
|
||||
<MdSettings />
|
||||
<IconText>Style Settings</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction
|
||||
wdKey="nav:open"
|
||||
onClick={this.props.onToggleModal.bind(this, "open")}
|
||||
>
|
||||
<MdOpenInBrowser />
|
||||
<IconText>Open</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction
|
||||
wdKey="nav:export"
|
||||
onClick={this.props.onToggleModal.bind(this, "export")}
|
||||
>
|
||||
<MdFileDownload />
|
||||
<IconText>Export</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction
|
||||
wdKey="nav:sources"
|
||||
onClick={this.props.onToggleModal.bind(this, "sources")}
|
||||
>
|
||||
<MdLayers />
|
||||
<IconText>Data Sources</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction
|
||||
wdKey="nav:settings"
|
||||
onClick={this.props.onToggleModal.bind(this, "settings")}
|
||||
>
|
||||
<MdSettings />
|
||||
<IconText>Style Settings</IconText>
|
||||
</ToolbarAction>
|
||||
|
||||
<ToolbarSelect wdKey="nav:inspect">
|
||||
<MdFindInPage />
|
||||
<label>View
|
||||
<select
|
||||
className="maputnik-select"
|
||||
onChange={(e) => this.handleSelection(e.target.value)}
|
||||
value={currentView.id}
|
||||
>
|
||||
{views.filter(v => v.group === "general").map((item) => {
|
||||
return (
|
||||
<option key={item.id} value={item.id} disabled={item.disabled}>
|
||||
{item.title}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
<optgroup label="Color accessibility">
|
||||
{views.filter(v => v.group === "color-accessibility").map((item) => {
|
||||
return (
|
||||
<option key={item.id} value={item.id} disabled={item.disabled}>
|
||||
{item.title}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</optgroup>
|
||||
</select>
|
||||
</label>
|
||||
</ToolbarSelect>
|
||||
<ToolbarSelect wdKey="nav:inspect">
|
||||
<MdFindInPage />
|
||||
<label>
|
||||
View
|
||||
<select
|
||||
className="maputnik-select"
|
||||
data-wd-key="maputnik-select"
|
||||
onChange={(e) => this.handleSelection(e.target.value)}
|
||||
value={currentView.id}
|
||||
>
|
||||
{views
|
||||
.filter((v) => v.group === "general")
|
||||
.map((item) => {
|
||||
return (
|
||||
<option
|
||||
key={item.id}
|
||||
value={item.id}
|
||||
disabled={item.disabled}
|
||||
data-wd-key={item.id}
|
||||
>
|
||||
{item.title}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
<optgroup label="Color accessibility">
|
||||
{views
|
||||
.filter((v) => v.group === "color-accessibility")
|
||||
.map((item) => {
|
||||
return (
|
||||
<option
|
||||
key={item.id}
|
||||
value={item.id}
|
||||
disabled={item.disabled}
|
||||
>
|
||||
{item.title}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</optgroup>
|
||||
</select>
|
||||
</label>
|
||||
</ToolbarSelect>
|
||||
|
||||
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
|
||||
<MdHelpOutline />
|
||||
<IconText>Help</IconText>
|
||||
</ToolbarLink>
|
||||
<ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
|
||||
<MdAssignmentTurnedIn />
|
||||
<IconText>Take the Maputnik Survey</IconText>
|
||||
</ToolbarLinkHighlighted>
|
||||
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
|
||||
<MdHelpOutline />
|
||||
<IconText>Help</IconText>
|
||||
</ToolbarLink>
|
||||
<ToolbarLinkHighlighted
|
||||
href={"https://gregorywolanski.typeform.com/to/cPgaSY"}
|
||||
>
|
||||
<MdAssignmentTurnedIn />
|
||||
<IconText>Take the Maputnik Survey</IconText>
|
||||
</ToolbarLinkHighlighted>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,47 +1,46 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
import { Button, Menu, MenuItem, Wrapper } from "react-aria-menubutton";
|
||||
|
||||
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 {Accordion} from 'react-accessible-accordion';
|
||||
import { Accordion } from "react-accessible-accordion";
|
||||
import FieldComment from "./FieldComment";
|
||||
import FieldId from "./FieldId";
|
||||
import FieldJson from "./FieldJson";
|
||||
import FieldMaxZoom from "./FieldMaxZoom";
|
||||
import FieldMinZoom from "./FieldMinZoom";
|
||||
import FieldSource from "./FieldSource";
|
||||
import FieldSourceLayer from "./FieldSourceLayer";
|
||||
import FieldType from "./FieldType";
|
||||
import FilterEditor from "./FilterEditor";
|
||||
import LayerEditorGroup from "./LayerEditorGroup";
|
||||
import PropertyGroup from "./PropertyGroup";
|
||||
|
||||
import {MdMoreVert} from 'react-icons/md'
|
||||
import { MdMoreVert } from "react-icons/md";
|
||||
|
||||
import { changeType, changeProperty } from '../libs/layer'
|
||||
import layout from '../config/layout.json'
|
||||
import {formatLayerId} from '../util/format';
|
||||
import layout from "../config/layout.json";
|
||||
import { changeProperty, changeType } from "../libs/layer";
|
||||
import { formatLayerId } from "../util/format";
|
||||
|
||||
|
||||
function getLayoutForType (type) {
|
||||
function getLayoutForType(type) {
|
||||
return layout[type] ? layout[type] : layout.invalid;
|
||||
}
|
||||
|
||||
function layoutGroups(layerType) {
|
||||
const layerGroup = {
|
||||
title: 'Layer',
|
||||
type: 'layer'
|
||||
}
|
||||
title: "Layer",
|
||||
type: "layer",
|
||||
};
|
||||
const filterGroup = {
|
||||
title: 'Filter',
|
||||
type: 'filter'
|
||||
}
|
||||
title: "Filter",
|
||||
type: "filter",
|
||||
};
|
||||
const editorGroup = {
|
||||
title: 'JSON Editor',
|
||||
type: 'jsoneditor'
|
||||
}
|
||||
title: "JSON Editor",
|
||||
type: "jsoneditor",
|
||||
};
|
||||
return [layerGroup, filterGroup]
|
||||
.concat(getLayoutForType(layerType).groups)
|
||||
.concat([editorGroup])
|
||||
.concat([editorGroup]);
|
||||
}
|
||||
|
||||
/** Layer editor supporting multiple types of layers. */
|
||||
@@ -61,277 +60,320 @@ export default class LayerEditor extends React.Component {
|
||||
isLastLayer: PropTypes.bool,
|
||||
layerIndex: PropTypes.number,
|
||||
errors: PropTypes.array,
|
||||
}
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
onLayerChanged: () => {},
|
||||
onLayerIdChange: () => {},
|
||||
onLayerDestroyed: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
reactIconBase: PropTypes.object
|
||||
}
|
||||
reactIconBase: PropTypes.object,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
super(props);
|
||||
|
||||
//TODO: Clean this up and refactor into function
|
||||
const editorGroups = {}
|
||||
layoutGroups(this.props.layer.type).forEach(group => {
|
||||
editorGroups[group.title] = true
|
||||
})
|
||||
const editorGroups = {};
|
||||
layoutGroups(this.props.layer.type).forEach((group) => {
|
||||
editorGroups[group.title] = true;
|
||||
});
|
||||
|
||||
this.state = { editorGroups }
|
||||
this.state = { editorGroups };
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
const additionalGroups = { ...state.editorGroups }
|
||||
const additionalGroups = { ...state.editorGroups };
|
||||
|
||||
getLayoutForType(props.layer.type).groups.forEach(group => {
|
||||
if(!(group.title in additionalGroups)) {
|
||||
additionalGroups[group.title] = true
|
||||
getLayoutForType(props.layer.type).groups.forEach((group) => {
|
||||
if (!(group.title in additionalGroups)) {
|
||||
additionalGroups[group.title] = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return {
|
||||
editorGroups: additionalGroups
|
||||
editorGroups: additionalGroups,
|
||||
};
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
getChildContext() {
|
||||
return {
|
||||
reactIconBase: {
|
||||
size: 14,
|
||||
color: '#8e8e8e',
|
||||
}
|
||||
}
|
||||
color: "#8e8e8e",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
changeProperty(group, property, newValue) {
|
||||
this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
changeProperty(this.props.layer, group, property, newValue)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
onGroupToggle(groupTitle, active) {
|
||||
const changedActiveGroups = {
|
||||
...this.state.editorGroups,
|
||||
[groupTitle]: active,
|
||||
}
|
||||
};
|
||||
this.setState({
|
||||
editorGroups: changedActiveGroups
|
||||
})
|
||||
editorGroups: changedActiveGroups,
|
||||
});
|
||||
}
|
||||
|
||||
renderGroupType(type, fields) {
|
||||
let comment = ""
|
||||
if(this.props.layer.metadata) {
|
||||
comment = this.props.layer.metadata['maputnik:comment']
|
||||
let comment = "";
|
||||
if (this.props.layer.metadata) {
|
||||
comment = this.props.layer.metadata["maputnik:comment"];
|
||||
}
|
||||
const {errors, layerIndex} = this.props;
|
||||
const { errors, layerIndex } = this.props;
|
||||
|
||||
const errorData = {};
|
||||
errors.forEach(error => {
|
||||
errors.forEach((error) => {
|
||||
if (
|
||||
error.parsed &&
|
||||
error.parsed.type === "layer" &&
|
||||
error.parsed.data.index == layerIndex
|
||||
) {
|
||||
errorData[error.parsed.data.key] = {
|
||||
message: error.parsed.data.message
|
||||
message: error.parsed.data.message,
|
||||
};
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
let sourceLayerIds;
|
||||
if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
|
||||
if (this.props.sources.hasOwnProperty(this.props.layer.source)) {
|
||||
sourceLayerIds = this.props.sources[this.props.layer.source].layers;
|
||||
}
|
||||
|
||||
switch(type) {
|
||||
case 'layer': return <div>
|
||||
<FieldId
|
||||
value={this.props.layer.id}
|
||||
wdKey="layer-editor.layer-id"
|
||||
error={errorData.id}
|
||||
onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
|
||||
/>
|
||||
<FieldType
|
||||
disabled={true}
|
||||
error={errorData.type}
|
||||
value={this.props.layer.type}
|
||||
onChange={newType => this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
changeType(this.props.layer, newType)
|
||||
)}
|
||||
/>
|
||||
{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)}
|
||||
/>
|
||||
}
|
||||
{['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
|
||||
<FieldSourceLayer
|
||||
error={errorData['source-layer']}
|
||||
sourceLayerIds={sourceLayerIds}
|
||||
value={this.props.layer['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)}
|
||||
/>
|
||||
<FieldMaxZoom
|
||||
error={errorData.maxzoom}
|
||||
value={this.props.layer.maxzoom}
|
||||
onChange={v => this.changeProperty(null, 'maxzoom', v)}
|
||||
/>
|
||||
<FieldComment
|
||||
error={errorData.comment}
|
||||
value={comment}
|
||||
onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == "" ? undefined : v)}
|
||||
/>
|
||||
</div>
|
||||
case 'filter': return <div>
|
||||
<div className="maputnik-filter-editor-wrapper">
|
||||
<FilterEditor
|
||||
switch (type) {
|
||||
case "layer":
|
||||
return (
|
||||
<div>
|
||||
<FieldId
|
||||
value={this.props.layer.id}
|
||||
wdKey="layer-editor.layer-id"
|
||||
error={errorData.id}
|
||||
onChange={(newId) =>
|
||||
this.props.onLayerIdChange(
|
||||
this.props.layerIndex,
|
||||
this.props.layer.id,
|
||||
newId
|
||||
)
|
||||
}
|
||||
/>
|
||||
<FieldType
|
||||
disabled={true}
|
||||
error={errorData.type}
|
||||
value={this.props.layer.type}
|
||||
onChange={(newType) =>
|
||||
this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
changeType(this.props.layer, newType)
|
||||
)
|
||||
}
|
||||
/>
|
||||
{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)}
|
||||
/>
|
||||
)}
|
||||
{["background", "raster", "hillshade", "heatmap"].indexOf(
|
||||
this.props.layer.type
|
||||
) < 0 && (
|
||||
<FieldSourceLayer
|
||||
error={errorData["source-layer"]}
|
||||
sourceLayerIds={sourceLayerIds}
|
||||
value={this.props.layer["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)}
|
||||
/>
|
||||
<FieldMaxZoom
|
||||
error={errorData.maxzoom}
|
||||
value={this.props.layer.maxzoom}
|
||||
onChange={(v) => this.changeProperty(null, "maxzoom", v)}
|
||||
/>
|
||||
<FieldComment
|
||||
error={errorData.comment}
|
||||
value={comment}
|
||||
onChange={(v) =>
|
||||
this.changeProperty(
|
||||
"metadata",
|
||||
"maputnik:comment",
|
||||
v == "" ? undefined : v
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case "filter":
|
||||
return (
|
||||
<div>
|
||||
<div className="maputnik-filter-editor-wrapper">
|
||||
<FilterEditor
|
||||
errors={errorData}
|
||||
filter={this.props.layer.filter}
|
||||
properties={
|
||||
this.props.vectorLayers[this.props.layer["source-layer"]]
|
||||
}
|
||||
onChange={(f) => this.changeProperty(null, "filter", f)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case "properties":
|
||||
return (
|
||||
<PropertyGroup
|
||||
errors={errorData}
|
||||
filter={this.props.layer.filter}
|
||||
properties={this.props.vectorLayers[this.props.layer['source-layer']]}
|
||||
onChange={f => this.changeProperty(null, 'filter', f)}
|
||||
layer={this.props.layer}
|
||||
groupFields={fields}
|
||||
spec={this.props.spec}
|
||||
onChange={this.changeProperty.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
case 'properties':
|
||||
return <PropertyGroup
|
||||
errors={errorData}
|
||||
layer={this.props.layer}
|
||||
groupFields={fields}
|
||||
spec={this.props.spec}
|
||||
onChange={this.changeProperty.bind(this)}
|
||||
/>
|
||||
case 'jsoneditor':
|
||||
return <FieldJson
|
||||
layer={this.props.layer}
|
||||
onChange={(layer) => {
|
||||
this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
layer
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case "jsoneditor":
|
||||
return (
|
||||
<FieldJson
|
||||
layer={this.props.layer}
|
||||
onChange={(layer) => {
|
||||
this.props.onLayerChanged(this.props.layerIndex, layer);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
moveLayer(offset) {
|
||||
this.props.onMoveLayer({
|
||||
oldIndex: this.props.layerIndex,
|
||||
newIndex: this.props.layerIndex+offset
|
||||
})
|
||||
newIndex: this.props.layerIndex + offset,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const groupIds = [];
|
||||
const layerType = this.props.layer.type
|
||||
const groups = layoutGroups(layerType).filter(group => {
|
||||
return !(layerType === 'background' && group.type === 'source')
|
||||
}).map(group => {
|
||||
const groupId = group.title.replace(/ /g, "_");
|
||||
groupIds.push(groupId);
|
||||
return <LayerEditorGroup
|
||||
data-wd-key={group.title}
|
||||
id={groupId}
|
||||
key={group.title}
|
||||
title={group.title}
|
||||
isActive={this.state.editorGroups[group.title]}
|
||||
onActiveToggle={this.onGroupToggle.bind(this, group.title)}
|
||||
>
|
||||
{this.renderGroupType(group.type, group.fields)}
|
||||
</LayerEditorGroup>
|
||||
})
|
||||
const layerType = this.props.layer.type;
|
||||
const groups = layoutGroups(layerType)
|
||||
.filter((group) => {
|
||||
return !(layerType === "background" && group.type === "source");
|
||||
})
|
||||
.map((group) => {
|
||||
const groupId = group.title.replace(/ /g, "_");
|
||||
groupIds.push(groupId);
|
||||
return (
|
||||
<LayerEditorGroup
|
||||
data-wd-key={group.title}
|
||||
id={groupId}
|
||||
key={group.title}
|
||||
title={group.title}
|
||||
isActive={this.state.editorGroups[group.title]}
|
||||
onActiveToggle={this.onGroupToggle.bind(this, group.title)}
|
||||
>
|
||||
{this.renderGroupType(group.type, group.fields)}
|
||||
</LayerEditorGroup>
|
||||
);
|
||||
});
|
||||
|
||||
const layout = this.props.layer.layout || {}
|
||||
const layout = this.props.layer.layout || {};
|
||||
|
||||
const items = {
|
||||
delete: {
|
||||
text: "Delete",
|
||||
handler: () => this.props.onLayerDestroy(this.props.layerIndex)
|
||||
handler: () => this.props.onLayerDestroy(this.props.layerIndex),
|
||||
},
|
||||
duplicate: {
|
||||
text: "Duplicate",
|
||||
handler: () => this.props.onLayerCopy(this.props.layerIndex)
|
||||
handler: () => this.props.onLayerCopy(this.props.layerIndex),
|
||||
},
|
||||
hide: {
|
||||
text: (layout.visibility === "none") ? "Show" : "Hide",
|
||||
handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
|
||||
text: layout.visibility === "none" ? "Show" : "Hide",
|
||||
handler: () =>
|
||||
this.props.onLayerVisibilityToggle(this.props.layerIndex),
|
||||
},
|
||||
moveLayerUp: {
|
||||
text: "Move layer up",
|
||||
// Not actually used...
|
||||
disabled: this.props.isFirstLayer,
|
||||
handler: () => this.moveLayer(-1)
|
||||
handler: () => this.moveLayer(-1),
|
||||
},
|
||||
moveLayerDown: {
|
||||
text: "Move layer down",
|
||||
// Not actually used...
|
||||
disabled: this.props.isLastLayer,
|
||||
handler: () => this.moveLayer(+1)
|
||||
}
|
||||
}
|
||||
handler: () => this.moveLayer(+1),
|
||||
},
|
||||
};
|
||||
|
||||
function handleSelection(id, event) {
|
||||
event.stopPropagation;
|
||||
items[id].handler();
|
||||
}
|
||||
|
||||
return <section className="maputnik-layer-editor"
|
||||
role="main"
|
||||
aria-label="Layer editor"
|
||||
>
|
||||
<header>
|
||||
<div className="layer-header">
|
||||
<h2 className="layer-header__title">
|
||||
Layer: {formatLayerId(this.props.layer.id)}
|
||||
</h2>
|
||||
<div className="layer-header__info">
|
||||
<Wrapper
|
||||
className='more-menu'
|
||||
onSelection={handleSelection}
|
||||
closeOnSelection={false}
|
||||
>
|
||||
<Button id="skip-target-layer-editor" className='more-menu__button' title="Layer options">
|
||||
<MdMoreVert className="more-menu__button__svg" />
|
||||
</Button>
|
||||
<Menu>
|
||||
<ul className="more-menu__menu">
|
||||
{Object.keys(items).map((id, idx) => {
|
||||
const item = items[id];
|
||||
return <li key={id}>
|
||||
<MenuItem value={id} className='more-menu__menu__item'>
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</Menu>
|
||||
</Wrapper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<Accordion
|
||||
allowMultipleExpanded={true}
|
||||
allowZeroExpanded={true}
|
||||
preExpanded={groupIds}
|
||||
return (
|
||||
<section
|
||||
className="maputnik-layer-editor"
|
||||
role="main"
|
||||
aria-label="Layer editor"
|
||||
>
|
||||
{groups}
|
||||
</Accordion>
|
||||
</section>
|
||||
<header>
|
||||
<div className="layer-header">
|
||||
<h2 className="layer-header__title">
|
||||
Layer: {formatLayerId(this.props.layer.id)}
|
||||
</h2>
|
||||
<div className="layer-header__info">
|
||||
<Wrapper
|
||||
className="more-menu"
|
||||
onSelection={handleSelection}
|
||||
closeOnSelection={false}
|
||||
>
|
||||
<Button
|
||||
data-wd-key="skip-target-layer-editor"
|
||||
id="skip-target-layer-editor"
|
||||
className="more-menu__button"
|
||||
title="Layer options"
|
||||
>
|
||||
<MdMoreVert className="more-menu__button__svg" />
|
||||
</Button>
|
||||
<Menu>
|
||||
<ul className="more-menu__menu">
|
||||
{Object.keys(items).map((id, idx) => {
|
||||
const item = items[id];
|
||||
return (
|
||||
<li key={id}>
|
||||
<MenuItem
|
||||
value={id}
|
||||
className="more-menu__menu__item"
|
||||
>
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Menu>
|
||||
</Wrapper>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Accordion
|
||||
allowMultipleExpanded={true}
|
||||
allowZeroExpanded={true}
|
||||
preExpanded={groupIds}
|
||||
>
|
||||
{groups}
|
||||
</Accordion>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classnames from 'classnames'
|
||||
import lodash from 'lodash';
|
||||
import classnames from "classnames";
|
||||
import lodash from "lodash";
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
|
||||
import LayerListGroup from './LayerListGroup'
|
||||
import LayerListItem from './LayerListItem'
|
||||
import ModalAdd from './ModalAdd'
|
||||
import LayerListGroup from "./LayerListGroup";
|
||||
import LayerListItem from "./LayerListItem";
|
||||
import ModalAdd from "./ModalAdd";
|
||||
|
||||
import {SortableContainer} from 'react-sortable-hoc';
|
||||
import { SortableContainer } from "react-sortable-hoc";
|
||||
|
||||
const layerListPropTypes = {
|
||||
layers: PropTypes.array.isRequired,
|
||||
@@ -15,34 +15,34 @@ const layerListPropTypes = {
|
||||
onLayersChange: PropTypes.func.isRequired,
|
||||
onLayerSelect: PropTypes.func,
|
||||
sources: PropTypes.object.isRequired,
|
||||
}
|
||||
};
|
||||
|
||||
function layerPrefix(name) {
|
||||
return name.replace(' ', '-').replace('_', '-').split('-')[0]
|
||||
return name.replace(" ", "-").replace("_", "-").split("-")[0];
|
||||
}
|
||||
|
||||
function findClosestCommonPrefix(layers, idx) {
|
||||
const currentLayerPrefix = layerPrefix(layers[idx].id)
|
||||
let closestIdx = idx
|
||||
const currentLayerPrefix = layerPrefix(layers[idx].id);
|
||||
let closestIdx = idx;
|
||||
for (let i = idx; i > 0; i--) {
|
||||
const previousLayerPrefix = layerPrefix(layers[i-1].id)
|
||||
if(previousLayerPrefix === currentLayerPrefix) {
|
||||
closestIdx = i - 1
|
||||
const previousLayerPrefix = layerPrefix(layers[i - 1].id);
|
||||
if (previousLayerPrefix === currentLayerPrefix) {
|
||||
closestIdx = i - 1;
|
||||
} else {
|
||||
return closestIdx
|
||||
return closestIdx;
|
||||
}
|
||||
}
|
||||
return closestIdx
|
||||
return closestIdx;
|
||||
}
|
||||
|
||||
let UID = 0;
|
||||
|
||||
// List of collapsible layer editors
|
||||
class LayerListContainer extends React.Component {
|
||||
static propTypes = {...layerListPropTypes}
|
||||
static propTypes = { ...layerListPropTypes };
|
||||
static defaultProps = {
|
||||
onLayerSelect: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -56,8 +56,8 @@ class LayerListContainer extends React.Component {
|
||||
},
|
||||
isOpen: {
|
||||
add: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
toggleModal(modalName) {
|
||||
@@ -68,79 +68,82 @@ class LayerListContainer extends React.Component {
|
||||
},
|
||||
isOpen: {
|
||||
...this.state.isOpen,
|
||||
[modalName]: !this.state.isOpen[modalName]
|
||||
}
|
||||
})
|
||||
[modalName]: !this.state.isOpen[modalName],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
toggleLayers = () => {
|
||||
let idx=0
|
||||
let idx = 0;
|
||||
|
||||
let newGroups=[]
|
||||
|
||||
this.groupedLayers().forEach(layers => {
|
||||
const groupPrefix = layerPrefix(layers[0].id)
|
||||
const lookupKey = [groupPrefix, idx].join('-')
|
||||
let newGroups = [];
|
||||
|
||||
this.groupedLayers().forEach((layers) => {
|
||||
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
|
||||
})
|
||||
}
|
||||
areAllGroupsExpanded: !this.state.areAllGroupsExpanded,
|
||||
});
|
||||
};
|
||||
|
||||
groupedLayers() {
|
||||
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]
|
||||
layerIdCount.set(origLayer.id,
|
||||
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)
|
||||
};
|
||||
if (
|
||||
previousLayer &&
|
||||
layerPrefix(previousLayer.id) == layerPrefix(layer.id)
|
||||
) {
|
||||
const lastGroup = groups[groups.length - 1];
|
||||
lastGroup.push(layer);
|
||||
} else {
|
||||
groups.push([layer])
|
||||
groups.push([layer]);
|
||||
}
|
||||
}
|
||||
return groups
|
||||
return groups;
|
||||
}
|
||||
|
||||
toggleLayerGroup(groupPrefix, idx) {
|
||||
const lookupKey = [groupPrefix, idx].join('-')
|
||||
const newGroups = { ...this.state.collapsedGroups }
|
||||
if(lookupKey in this.state.collapsedGroups) {
|
||||
newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
|
||||
const lookupKey = [groupPrefix, idx].join("-");
|
||||
const newGroups = { ...this.state.collapsedGroups };
|
||||
if (lookupKey in this.state.collapsedGroups) {
|
||||
newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey];
|
||||
} else {
|
||||
newGroups[lookupKey] = false
|
||||
newGroups[lookupKey] = false;
|
||||
}
|
||||
this.setState({
|
||||
collapsedGroups: newGroups
|
||||
})
|
||||
collapsedGroups: newGroups,
|
||||
});
|
||||
}
|
||||
|
||||
isCollapsed(groupPrefix, idx) {
|
||||
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, nextState) {
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
// Always update on state change
|
||||
if (this.state !== nextState) {
|
||||
return true;
|
||||
@@ -148,28 +151,28 @@ class LayerListContainer extends React.Component {
|
||||
|
||||
// This component tree only requires id and visibility from the layers
|
||||
// objects
|
||||
function getRequiredProps (layer) {
|
||||
function getRequiredProps(layer) {
|
||||
const out = {
|
||||
id: layer.id,
|
||||
};
|
||||
|
||||
if (layer.layout) {
|
||||
out.layout = {
|
||||
visibility: layer.layout.visibility
|
||||
visibility: layer.layout.visibility,
|
||||
};
|
||||
}
|
||||
return out;
|
||||
}
|
||||
const layersEqual = lodash.isEqual(
|
||||
nextProps.layers.map(getRequiredProps),
|
||||
this.props.layers.map(getRequiredProps),
|
||||
this.props.layers.map(getRequiredProps)
|
||||
);
|
||||
|
||||
function withoutLayers (props) {
|
||||
function withoutLayers(props) {
|
||||
const out = {
|
||||
...props
|
||||
...props,
|
||||
};
|
||||
delete out['layers'];
|
||||
delete out["layers"];
|
||||
return out;
|
||||
}
|
||||
|
||||
@@ -184,16 +187,16 @@ class LayerListContainer extends React.Component {
|
||||
return propsChanged;
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
|
||||
const selectedItemNode = this.selectedItemRef.current;
|
||||
if (selectedItemNode && selectedItemNode.node) {
|
||||
const target = selectedItemNode.node;
|
||||
const options = {
|
||||
root: this.scrollContainerRef.current,
|
||||
threshold: 1.0
|
||||
}
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
threshold: 1.0,
|
||||
};
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
observer.unobserve(target);
|
||||
if (entries.length > 0 && entries[0].intersectionRatio < 1) {
|
||||
target.scrollIntoView();
|
||||
@@ -206,28 +209,32 @@ class LayerListContainer extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const listItems = []
|
||||
let idx = 0
|
||||
const listItems = [];
|
||||
let idx = 0;
|
||||
const layersByGroup = this.groupedLayers();
|
||||
layersByGroup.forEach(layers => {
|
||||
const groupPrefix = layerPrefix(layers[0].id)
|
||||
if(layers.length > 1) {
|
||||
const grp = <LayerListGroup
|
||||
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)
|
||||
layersByGroup.forEach((layers) => {
|
||||
const groupPrefix = layerPrefix(layers[0].id);
|
||||
if (layers.length > 1) {
|
||||
const grp = (
|
||||
<LayerListGroup
|
||||
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);
|
||||
}
|
||||
|
||||
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 => {
|
||||
const layerError = this.props.errors.find((error) => {
|
||||
return (
|
||||
error.parsed &&
|
||||
error.parsed.type === "layer" &&
|
||||
@@ -240,93 +247,107 @@ class LayerListContainer extends React.Component {
|
||||
additionalProps.ref = this.selectedItemRef;
|
||||
}
|
||||
|
||||
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
|
||||
})}
|
||||
index={idx}
|
||||
key={layer.key}
|
||||
id={layer.key}
|
||||
layerId={layer.id}
|
||||
layerIndex={idx}
|
||||
layerType={layer.type}
|
||||
visibility={(layer.layout || {}).visibility}
|
||||
isSelected={idx === this.props.selectedLayerIndex}
|
||||
onLayerSelect={this.props.onLayerSelect}
|
||||
onLayerDestroy={this.props.onLayerDestroy.bind(this)}
|
||||
onLayerCopy={this.props.onLayerCopy.bind(this)}
|
||||
onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
|
||||
{...additionalProps}
|
||||
/>
|
||||
listItems.push(listItem)
|
||||
idx += 1
|
||||
})
|
||||
})
|
||||
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,
|
||||
})}
|
||||
index={idx}
|
||||
key={layer.key}
|
||||
id={layer.key}
|
||||
layerId={layer.id}
|
||||
layerIndex={idx}
|
||||
layerType={layer.type}
|
||||
visibility={(layer.layout || {}).visibility}
|
||||
isSelected={idx === this.props.selectedLayerIndex}
|
||||
onLayerSelect={this.props.onLayerSelect}
|
||||
onLayerDestroy={this.props.onLayerDestroy.bind(this)}
|
||||
onLayerCopy={this.props.onLayerCopy.bind(this)}
|
||||
onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(
|
||||
this
|
||||
)}
|
||||
{...additionalProps}
|
||||
/>
|
||||
);
|
||||
listItems.push(listItem);
|
||||
idx += 1;
|
||||
});
|
||||
});
|
||||
|
||||
return <section
|
||||
className="maputnik-layer-list"
|
||||
role="complementary"
|
||||
aria-label="Layers list"
|
||||
ref={this.scrollContainerRef}
|
||||
>
|
||||
<ModalAdd
|
||||
return (
|
||||
<section
|
||||
className="maputnik-layer-list"
|
||||
role="complementary"
|
||||
aria-label="Layers list"
|
||||
ref={this.scrollContainerRef}
|
||||
>
|
||||
<ModalAdd
|
||||
key={this.state.keys.add}
|
||||
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">
|
||||
<span className="maputnik-layer-list-header-title">Layers</span>
|
||||
<span className="maputnik-space" />
|
||||
<div className="maputnik-default-property">
|
||||
<div className="maputnik-multibutton">
|
||||
<button
|
||||
id="skip-target-layer-list"
|
||||
onClick={this.toggleLayers}
|
||||
className="maputnik-button">
|
||||
{this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
|
||||
</button>
|
||||
/>
|
||||
<header className="maputnik-layer-list-header">
|
||||
<span className="maputnik-layer-list-header-title">Layers</span>
|
||||
<span className="maputnik-space" />
|
||||
<div className="maputnik-default-property">
|
||||
<div className="maputnik-multibutton">
|
||||
<button
|
||||
id="skip-target-layer-list"
|
||||
data-wd-key="skip-target-layer-list"
|
||||
onClick={this.toggleLayers}
|
||||
className="maputnik-button"
|
||||
>
|
||||
{this.state.areAllGroupsExpanded === true
|
||||
? "Collapse"
|
||||
: "Expand"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="maputnik-default-property">
|
||||
<div className="maputnik-multibutton">
|
||||
<button
|
||||
onClick={this.toggleModal.bind(this, 'add')}
|
||||
data-wd-key="layer-list:add-layer"
|
||||
className="maputnik-button maputnik-button-selected">
|
||||
Add Layer
|
||||
</button>
|
||||
<div className="maputnik-default-property">
|
||||
<div className="maputnik-multibutton">
|
||||
<button
|
||||
onClick={this.toggleModal.bind(this, "add")}
|
||||
data-wd-key="layer-list:add-layer"
|
||||
className="maputnik-button maputnik-button-selected"
|
||||
>
|
||||
Add Layer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div role="navigation" aria-label="Layers list">
|
||||
<ul className="maputnik-layer-list-container">{listItems}</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
role="navigation"
|
||||
aria-label="Layers list"
|
||||
>
|
||||
<ul className="maputnik-layer-list-container">
|
||||
{listItems}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
|
||||
const LayerListContainerSortable = SortableContainer((props) => (
|
||||
<LayerListContainer {...props} />
|
||||
));
|
||||
|
||||
export default class LayerList extends React.Component {
|
||||
static propTypes = {...layerListPropTypes}
|
||||
static propTypes = { ...layerListPropTypes };
|
||||
|
||||
render() {
|
||||
return <LayerListContainerSortable
|
||||
{...this.props}
|
||||
helperClass='sortableHelper'
|
||||
onSortEnd={this.props.onMoveLayer.bind(this)}
|
||||
useDragHandle={true}
|
||||
shouldCancelStart={() => false}
|
||||
/>
|
||||
return (
|
||||
<LayerListContainerSortable
|
||||
{...this.props}
|
||||
helperClass="sortableHelper"
|
||||
onSortEnd={this.props.onMoveLayer.bind(this)}
|
||||
useDragHandle={true}
|
||||
shouldCancelStart={() => false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import ReactDOM from 'react-dom'
|
||||
import MapLibreGl from 'maplibre-gl'
|
||||
import MapboxInspect from 'mapbox-gl-inspect'
|
||||
import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
|
||||
import MapMaplibreGlFeaturePropertyPopup from './MapMaplibreGlFeaturePropertyPopup'
|
||||
import tokens from '../config/tokens.json'
|
||||
import colors from 'mapbox-gl-inspect/lib/colors'
|
||||
import Color from 'color'
|
||||
import ZoomControl from '../libs/zoomcontrol'
|
||||
import { colorHighlightedLayer } from '../libs/highlight'
|
||||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
import '../maplibregl.css'
|
||||
import '../libs/maplibre-rtl'
|
||||
|
||||
import Color from "color";
|
||||
import MapboxInspect from "mapbox-gl-inspect";
|
||||
import colors from "mapbox-gl-inspect/lib/colors";
|
||||
import MapLibreGl from "maplibre-gl";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { colorHighlightedLayer } from "../libs/highlight";
|
||||
import "../libs/maplibre-rtl";
|
||||
import ZoomControl from "../libs/zoomcontrol";
|
||||
import "../maplibregl.css";
|
||||
import MapMaplibreGlFeaturePropertyPopup from "./MapMaplibreGlFeaturePropertyPopup";
|
||||
import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
|
||||
|
||||
const IS_SUPPORTED = MapLibreGl.supported();
|
||||
|
||||
@@ -24,32 +22,32 @@ function renderPopup(popup, mountNode) {
|
||||
|
||||
function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
|
||||
const backgroundLayer = {
|
||||
"id": "background",
|
||||
"type": "background",
|
||||
"paint": {
|
||||
"background-color": '#1c1f24',
|
||||
}
|
||||
id: "background",
|
||||
type: "background",
|
||||
paint: {
|
||||
"background-color": "#1c1f24",
|
||||
},
|
||||
};
|
||||
|
||||
const layer = colorHighlightedLayer(highlightedLayer);
|
||||
if (layer) {
|
||||
coloredLayers.push(layer);
|
||||
}
|
||||
|
||||
const layer = colorHighlightedLayer(highlightedLayer)
|
||||
if(layer) {
|
||||
coloredLayers.push(layer)
|
||||
}
|
||||
|
||||
const sources = {}
|
||||
Object.keys(originalMapStyle.sources).forEach(sourceId => {
|
||||
const source = originalMapStyle.sources[sourceId]
|
||||
if(source.type !== 'raster' && source.type !== 'raster-dem') {
|
||||
sources[sourceId] = source
|
||||
const sources = {};
|
||||
Object.keys(originalMapStyle.sources).forEach((sourceId) => {
|
||||
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)
|
||||
}
|
||||
return inspectStyle
|
||||
layers: [backgroundLayer].concat(coloredLayers),
|
||||
};
|
||||
return inspectStyle;
|
||||
}
|
||||
|
||||
export default class MapMaplibreGl extends React.Component {
|
||||
@@ -62,7 +60,7 @@ export default class MapMaplibreGl extends React.Component {
|
||||
options: PropTypes.object,
|
||||
replaceAccessTokens: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
}
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
onMapLoaded: () => {},
|
||||
@@ -70,51 +68,55 @@ export default class MapMaplibreGl extends React.Component {
|
||||
onLayerSelect: () => {},
|
||||
onChange: () => {},
|
||||
options: {},
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
super(props);
|
||||
this.state = {
|
||||
map: null,
|
||||
inspect: null,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
updateMapFromProps(props) {
|
||||
if(!IS_SUPPORTED) return;
|
||||
if (!IS_SUPPORTED) return;
|
||||
|
||||
if(!this.state.map) return
|
||||
if (!this.state.map) return;
|
||||
|
||||
//Maplibre GL now does diffing natively so we don't need to calculate
|
||||
//the necessary operations ourselves!
|
||||
this.state.map.setStyle(
|
||||
this.props.replaceAccessTokens(props.mapStyle),
|
||||
{diff: true}
|
||||
)
|
||||
this.state.map.setStyle(this.props.replaceAccessTokens(props.mapStyle), {
|
||||
diff: true,
|
||||
});
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
let should = false;
|
||||
try {
|
||||
should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
|
||||
} catch(e) {
|
||||
should =
|
||||
JSON.stringify(this.props) !== JSON.stringify(nextProps) ||
|
||||
JSON.stringify(this.state) !== JSON.stringify(nextState);
|
||||
} catch (e) {
|
||||
// no biggie, carry on
|
||||
}
|
||||
return should;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
if(!IS_SUPPORTED) return;
|
||||
if (!IS_SUPPORTED) return;
|
||||
|
||||
const map = this.state.map;
|
||||
|
||||
this.updateMapFromProps(this.props);
|
||||
|
||||
if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
|
||||
if (
|
||||
this.state.inspect &&
|
||||
this.props.inspectModeEnabled !== this.state.inspect._showInspectMap
|
||||
) {
|
||||
// HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
|
||||
// eslint-disable-next-line
|
||||
this.state.inspect._popupBlocked = false;
|
||||
this.state.inspect.toggleInspector()
|
||||
this.state.inspect.toggleInspector();
|
||||
}
|
||||
if (map) {
|
||||
if (this.props.inspectModeEnabled) {
|
||||
@@ -123,7 +125,7 @@ export default class MapMaplibreGl extends React.Component {
|
||||
// mapbox-gl-inspect.
|
||||
try {
|
||||
this.state.inspect.render();
|
||||
} catch(err) {
|
||||
} catch (err) {
|
||||
console.error("FIXME: Caught error", err);
|
||||
}
|
||||
}
|
||||
@@ -135,40 +137,40 @@ export default class MapMaplibreGl extends React.Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(!IS_SUPPORTED) return;
|
||||
if (!IS_SUPPORTED) return;
|
||||
|
||||
const mapOpts = {
|
||||
...this.props.options,
|
||||
container: this.container,
|
||||
style: this.props.mapStyle,
|
||||
hash: true,
|
||||
maxZoom: 24
|
||||
}
|
||||
maxZoom: 24,
|
||||
};
|
||||
|
||||
const map = new MapLibreGl.Map(mapOpts);
|
||||
|
||||
const mapViewChange = () => {
|
||||
const center = map.getCenter();
|
||||
const zoom = map.getZoom();
|
||||
this.props.onChange({center, zoom});
|
||||
}
|
||||
this.props.onChange({ center, zoom });
|
||||
};
|
||||
mapViewChange();
|
||||
|
||||
map.showTileBoundaries = mapOpts.showTileBoundaries;
|
||||
map.showCollisionBoxes = mapOpts.showCollisionBoxes;
|
||||
map.showOverdrawInspector = mapOpts.showOverdrawInspector;
|
||||
|
||||
const zoomControl = new ZoomControl;
|
||||
map.addControl(zoomControl, 'top-right');
|
||||
const zoomControl = new ZoomControl();
|
||||
map.addControl(zoomControl, "top-right");
|
||||
|
||||
const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
|
||||
map.addControl(nav, 'top-right');
|
||||
const nav = new MapLibreGl.NavigationControl({ visualizePitch: true });
|
||||
map.addControl(nav, "top-right");
|
||||
|
||||
const tmpNode = document.createElement('div');
|
||||
const tmpNode = document.createElement("div");
|
||||
|
||||
const inspect = new MapboxInspect({
|
||||
popup: new MapLibreGl.Popup({
|
||||
closeOnClick: false
|
||||
closeOnClick: false,
|
||||
}),
|
||||
showMapPopup: true,
|
||||
showMapPopupOnHover: false,
|
||||
@@ -176,41 +178,58 @@ export default class MapMaplibreGl extends React.Component {
|
||||
showInspectButton: false,
|
||||
blockHoverPopupOnClick: true,
|
||||
assignLayerColor: (layerId, alpha) => {
|
||||
return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
|
||||
return Color(colors.brightColor(layerId, alpha))
|
||||
.desaturate(0.5)
|
||||
.string();
|
||||
},
|
||||
buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
|
||||
renderPopup: features => {
|
||||
if(this.props.inspectModeEnabled) {
|
||||
return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
|
||||
buildInspectStyle: (originalMapStyle, coloredLayers) =>
|
||||
buildInspectStyle(
|
||||
originalMapStyle,
|
||||
coloredLayers,
|
||||
this.props.highlightedLayer
|
||||
),
|
||||
renderPopup: (features) => {
|
||||
if (this.props.inspectModeEnabled) {
|
||||
return renderPopup(
|
||||
<MapMaplibreGlFeaturePropertyPopup features={features} />,
|
||||
tmpNode
|
||||
);
|
||||
} else {
|
||||
return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
|
||||
return renderPopup(
|
||||
<MapMaplibreGlLayerPopup
|
||||
features={features}
|
||||
onLayerSelect={this.onLayerSelectById}
|
||||
zoom={this.state.zoom}
|
||||
/>,
|
||||
tmpNode
|
||||
);
|
||||
}
|
||||
}
|
||||
})
|
||||
map.addControl(inspect)
|
||||
},
|
||||
});
|
||||
map.addControl(inspect);
|
||||
|
||||
map.on("style.load", () => {
|
||||
this.setState({
|
||||
map,
|
||||
inspect,
|
||||
zoom: map.getZoom()
|
||||
zoom: map.getZoom(),
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
map.on("data", e => {
|
||||
if(e.dataType !== 'tile') return
|
||||
map.on("data", (e) => {
|
||||
if (e.dataType !== "tile") return;
|
||||
this.props.onDataChange({
|
||||
map: this.state.map
|
||||
})
|
||||
})
|
||||
map: this.state.map,
|
||||
});
|
||||
});
|
||||
|
||||
map.on("error", e => {
|
||||
map.on("error", (e) => {
|
||||
console.log("ERROR", e);
|
||||
})
|
||||
});
|
||||
|
||||
map.on("zoom", e => {
|
||||
map.on("zoom", (e) => {
|
||||
this.setState({
|
||||
zoom: map.getZoom()
|
||||
zoom: map.getZoom(),
|
||||
});
|
||||
});
|
||||
|
||||
@@ -219,28 +238,32 @@ export default class MapMaplibreGl extends React.Component {
|
||||
}
|
||||
|
||||
onLayerSelectById = (id) => {
|
||||
const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
|
||||
const index = this.props.mapStyle.layers.findIndex(
|
||||
(layer) => layer.id === id
|
||||
);
|
||||
this.props.onLayerSelect(index);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
if(IS_SUPPORTED) {
|
||||
return <div
|
||||
className="maputnik-map__map"
|
||||
role="region"
|
||||
aria-label="Map view"
|
||||
ref={x => this.container = x}
|
||||
></div>
|
||||
}
|
||||
else {
|
||||
return <div
|
||||
className="maputnik-map maputnik-map--error"
|
||||
>
|
||||
<div className="maputnik-map__error-message">
|
||||
Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
|
||||
if (IS_SUPPORTED) {
|
||||
return (
|
||||
<div
|
||||
className="maputnik-map__map"
|
||||
role="region"
|
||||
aria-label="Map view"
|
||||
ref={(x) => (this.container = x)}
|
||||
data-wd-key="maplibre:map"
|
||||
></div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="maputnik-map maputnik-map--error">
|
||||
<div className="maputnik-map__error-message">
|
||||
Error: Cannot load MaplibreGL, WebGL is either unsupported or
|
||||
disabled
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
export default class ZoomControl {
|
||||
onAdd(map) {
|
||||
this._map = map;
|
||||
this._container = document.createElement('div');
|
||||
this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
|
||||
this._container = document.createElement("div");
|
||||
this._container.className =
|
||||
"maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom";
|
||||
this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
|
||||
this._container.innerHTML = `
|
||||
Zoom: <span></span>
|
||||
`;
|
||||
this._textEl = this._container.querySelector("span");
|
||||
|
||||
|
||||
this.addEventListeners();
|
||||
|
||||
|
||||
return this._container;
|
||||
}
|
||||
|
||||
|
||||
updateZoomLevel() {
|
||||
this._textEl.innerHTML = this._map.getZoom().toFixed(2);
|
||||
}
|
||||
|
||||
addEventListeners (){
|
||||
this._map.on('render', this.updateZoomLevel.bind(this) );
|
||||
this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
|
||||
this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
|
||||
|
||||
addEventListeners() {
|
||||
this._map.on("render", this.updateZoomLevel.bind(this));
|
||||
this._map.on("zoomIn", this.updateZoomLevel.bind(this));
|
||||
this._map.on("zoomOut", this.updateZoomLevel.bind(this));
|
||||
}
|
||||
|
||||
onRemove() {
|
||||
|
||||
Reference in New Issue
Block a user