ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-02-05 20:20:02 +00:00
Code Issues Projects Releases Wiki Activity

Fix tests, types, added data-wd-key

Browse Source
This commit is contained in:
HarelM
2023-12-19 23:44:35 +02:00
parent 84adbe6eb2
commit 3ba3a20848
14 changed files with 1124 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/e2e/accessibility.cy.ts
View File

@@ -11,7 +11,7 @@ describe("accessibility", () => {
it("skip link to layer list", () => {
const selector = "root:skip:layer-list";
should.isExists(selector);
should.exist(selector);
when.tab();
should.beFocused(selector);
when.click(selector);
@@ -20,7 +20,7 @@ describe("accessibility", () => {
it("skip link to layer editor", () => {
const selector = "root:skip:layer-editor";
should.isExists(selector);
should.exist(selector);
when.tab().tab();
should.beFocused(selector);
when.click(selector);
@@ -29,7 +29,7 @@ describe("accessibility", () => {
it("skip link to map view", () => {
const selector = "root:skip:map-view";
should.isExists(selector);
should.exist(selector);
when.tab().tab().tab();
should.beFocused(selector);
when.click(selector);

46
cypress/e2e/driver.ts
View File

@@ -73,7 +73,7 @@ export default class MaputnikDriver {
}
cy.get(".maputnik-toolbar-link").should("be.visible");
},
fillLayersModal: (opts: any) => {
fillLayersModal: (opts: {type: string, layer?: string, id?: string}) => {
var type = opts.type;
var layer = opts.layer;
var id;
@@ -84,12 +84,12 @@ export default class MaputnikDriver {
}
cy.get(
this.get.getDataAttribute("add-layer.layer-type", "select")
this.get.dataAttribute("add-layer.layer-type", "select")
).select(type);
cy.get(this.get.getDataAttribute("add-layer.layer-id", "input")).type(id);
cy.get(this.get.dataAttribute("add-layer.layer-id", "input")).type(id);
if (layer) {
cy.get(
this.get.getDataAttribute("add-layer.layer-source-block", "input")
this.get.dataAttribute("add-layer.layer-source-block", "input")
).type(layer);
}
this.when.click("add-layer");
@@ -103,11 +103,20 @@ export default class MaputnikDriver {
click: (selector: string) => {
this.helper.when.click(selector);
// cy.get(selector).click({ force: true });
},
clickZoomin: () => {
cy.get(".maplibregl-ctrl-zoom-in").click();
},
selectWithin: (selector: string, value: string) => {
this.when.within(selector, () => {
cy.get("select").select(value);
});
},
select: (selector: string, value: string) => {
cy.get(selector).select(value);
this.helper.get.element(selector).select(value);
},
focus: (selector: string) => {
@@ -126,8 +135,8 @@ export default class MaputnikDriver {
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");
cy.get(this.get.dataAttribute("modal:add-layer")).should("exist");
cy.get(this.get.dataAttribute("modal:add-layer")).should("be.visible");
},
};
@@ -135,16 +144,16 @@ export default class MaputnikDriver {
isMac: () => {
return Cypress.platform === "darwin";
},
getStyleFromWindow: (win: Window) => {
styleFromWindow: (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: () => {
exampleFileUrl: () => {
return "http://localhost:8888/example-style.json";
},
getDataAttribute: (key: string, selector?: string): string => {
dataAttribute: (key: string, selector?: string): string => {
return `*[data-wd-key='${key}'] ${selector || ""}`;
},
};
@@ -176,23 +185,26 @@ export default class MaputnikDriver {
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
cy.window().then((win: any) => {
const obj = this.get.getStyleFromWindow(win);
const obj = this.get.styleFromWindow(win);
assert.deepEqual(getter(obj), styleObj);
});
},
isStyleStoreEqualToExampleFileData: () => {
styleStoreEqualToExampleFileData: () => {
cy.window().then((win: any) => {
const obj = this.get.getStyleFromWindow(win);
const obj = this.get.styleFromWindow(win);
cy.fixture("example-style.json").should("deep.equal", obj);
});
},
isExists: (selector: string) => {
exist: (selector: string) => {
this.helper.get.element(selector).should("exist");
},
isSelected: (selector: string, value: string) => {
cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
beSelected: (selector: string, value: string) => {
this.helper.get.element(selector).find(`option[value="${value}"]`).should("be.selected");
},
containText: (selector: string, text: string) => {
this.helper.get.element(selector).should("contain.text", text);
}
};
}

6
cypress/e2e/keyboard.cy.ts
View File

@@ -1,4 +1,4 @@
import { default as MaputnikDriver } from "./driver";
import MaputnikDriver from "./driver";
describe("keyboard", () => {
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
@@ -45,12 +45,12 @@ describe("keyboard", () => {
it("'i' should change map to inspect mode", () => {
when.typeKeys("i");
should.isSelected(get.getDataAttribute("nav:inspect"), "inspect");
should.beSelected("nav:inspect", "inspect");
});
it("'m' should focus map", () => {
when.typeKeys("m");
should.beFocused(".maplibregl-canvas");
should.canvasBeFocused();
});
it("'!' should show debug modal", () => {

24
cypress/e2e/layers.cy.ts
View File

@@ -1,4 +1,3 @@
var assert = require("assert");
import { v1 as uuid } from "uuid";
import MaputnikDriver from "./driver";
@@ -134,12 +133,9 @@ describe("layers", () => {
// Setup
var id = uuid();
when.select(
get.getDataAttribute("add-layer.layer-type", "select"),
"background"
);
when.selectWithin("add-layer.layer-type", "background");
when.setValue(
get.getDataAttribute("add-layer.layer-id", "input"),
get.dataAttribute("add-layer.layer-id", "input"),
"background:" + id
);
@@ -167,7 +163,7 @@ describe("layers", () => {
var id = uuid();
when.setValue(
get.getDataAttribute("layer-editor.layer-id", "input"),
get.dataAttribute("layer-editor.layer-id", "input"),
"foobar:" + id
);
when.click("min-zoom");
@@ -188,7 +184,7 @@ describe("layers", () => {
when.click("layer-list-item:background:" + bgId);
when.setValue(
get.getDataAttribute("min-zoom", 'input[type="text"]'),
get.dataAttribute("min-zoom", 'input[type="text"]'),
"1"
);
@@ -206,8 +202,8 @@ describe("layers", () => {
);
// AND RESET!
// driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
// driver.click(driver.getDataAttribute("max-zoom", "input"));
// driver.setValue(driver.get.dataAttribute("min-zoom", "input"), "")
// driver.click(driver.get.dataAttribute("max-zoom", "input"));
// driver.isStyleStoreEqual((a: any) => a.layers, [
// {
@@ -222,7 +218,7 @@ describe("layers", () => {
when.click("layer-list-item:background:" + bgId);
when.setValue(
get.getDataAttribute("max-zoom", 'input[type="text"]'),
get.dataAttribute("max-zoom", 'input[type="text"]'),
"1"
);
@@ -245,7 +241,7 @@ describe("layers", () => {
var id = uuid();
when.click("layer-list-item:background:" + bgId);
when.setValue(get.getDataAttribute("layer-comment", "textarea"), id);
when.setValue(get.dataAttribute("layer-comment", "textarea"), id);
when.click("layer-editor.layer-id");
@@ -324,9 +320,7 @@ describe("layers", () => {
when.typeKeys(
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
);
should.isExists(errorSelector);
when.click("layer-editor.layer-id");
should.exist(errorSelector);
});
});
});

8
cypress/e2e/map.cy.ts
View File

@@ -8,18 +8,16 @@ describe("map", () => {
var zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
should.beVisible("maplibre:ctrl-zoom");
// HM TODO
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
should.containText("maplibre: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);
when.clickZoomin();
should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
});
});
});

32
cypress/e2e/modals.cy.ts
View File

@@ -20,17 +20,17 @@ describe("modals", () => {
// HM: I was not able to make the following choose file actually to select a file and close the modal...
when.chooseExampleFile();
should.isStyleStoreEqualToExampleFileData();
should.styleStoreEqualToExampleFileData();
});
it("load from url", () => {
var styleFileUrl = get.getExampleFileUrl();
var styleFileUrl = get.exampleFileUrl();
when.setValue(get.getDataAttribute("modal:open.url.input"), styleFileUrl);
when.setValue(get.dataAttribute("modal:open.url.input"), styleFileUrl);
when.click("modal:open.url.button");
when.waitForExampleFileRequset();
should.isStyleStoreEqualToExampleFileData();
should.styleStoreEqualToExampleFileData();
});
});
@@ -67,7 +67,7 @@ describe("modals", () => {
it("toggle", () => {
when.setStyle("geojson");
when.select(get.getDataAttribute("nav:inspect", "select"), "inspect");
when.selectWithin("nav:inspect", "inspect");
});
});
@@ -77,20 +77,20 @@ describe("modals", () => {
});
it("name", () => {
when.setValue(get.getDataAttribute("modal:settings.name"), "foobar");
when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
when.click("modal:settings.owner");
should.equalStyleStore((obj) => obj.name, "foobar");
});
it("owner", () => {
when.setValue(get.getDataAttribute("modal:settings.owner"), "foobar");
when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.owner, "foobar");
});
it("sprite url", () => {
when.setValue(
get.getDataAttribute("modal:settings.sprite"),
get.dataAttribute("modal:settings.sprite"),
"http://example.com"
);
when.click("modal:settings.name");
@@ -99,7 +99,7 @@ describe("modals", () => {
});
it("glyphs url", () => {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
when.setValue(get.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
when.setValue(get.dataAttribute("modal:settings.glyphs"), glyphsUrl);
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
@@ -108,7 +108,7 @@ describe("modals", () => {
it("maptiler access token", () => {
var apiKey = "testing123";
when.setValue(
get.getDataAttribute(
get.dataAttribute(
"modal:settings.maputnik:openmaptiles_access_token"
),
apiKey
@@ -124,7 +124,7 @@ describe("modals", () => {
it("thunderforest access token", () => {
var apiKey = "testing123";
when.setValue(
get.getDataAttribute(
get.dataAttribute(
"modal:settings.maputnik:thunderforest_access_token"
),
apiKey
@@ -139,14 +139,8 @@ describe("modals", () => {
it("style renderer", () => {
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"
);
when.select("modal:settings.maputnik:renderer", "ol");
should.beSelected("modal:settings.maputnik:renderer", "ol");
when.click("modal:settings.name");

890
src/components/App.jsx
View File

File diff suppressed because it is too large Load Diff

355
src/components/AppToolbar.jsx
View File

@@ -1,33 +1,24 @@
import classnames from "classnames";
import { detect } from "detect-browser";
import PropTypes from "prop-types";
import React from "react";
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import {detect} from 'detect-browser';
import {
MdAssignmentTurnedIn,
MdFileDownload,
MdFindInPage,
MdHelpOutline,
MdLayers,
MdOpenInBrowser,
MdSettings,
} from "react-icons/md";
import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
import pkgJson from '../../package.json'
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>
}
}
@@ -37,19 +28,17 @@ 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>
}
}
@@ -58,41 +47,36 @@ 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>
}
}
@@ -100,19 +84,17 @@ 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>
}
}
@@ -130,7 +112,7 @@ export default class AppToolbar extends React.Component {
onSetMapState: PropTypes.func,
mapState: PropTypes.string,
renderer: PropTypes.string,
};
}
state = {
isOpen: {
@@ -139,8 +121,8 @@ export default class AppToolbar extends React.Component {
open: false,
add: false,
export: false,
},
};
}
}
handleSelection(val) {
this.props.onSetMapState(val);
@@ -149,11 +131,12 @@ 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 = [
@@ -166,7 +149,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",
@@ -198,137 +181,103 @@ 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")}
>
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"
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")}
>
<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"
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>
</div>
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>
</nav>
);
<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>
<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>
</div>
</div>
</nav>
}
}

456
src/components/LayerEditor.jsx
View File

@@ -1,46 +1,47 @@
import PropTypes from "prop-types";
import React from "react";
import { Button, Menu, MenuItem, Wrapper } from "react-aria-menubutton";
import React from 'react'
import PropTypes from 'prop-types'
import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
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 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 { MdMoreVert } from "react-icons/md";
import {MdMoreVert} from 'react-icons/md'
import layout from "../config/layout.json";
import { changeProperty, changeType } from "../libs/layer";
import { formatLayerId } from "../util/format";
import { changeType, changeProperty } from '../libs/layer'
import layout from '../config/layout.json'
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. */
@@ -60,320 +61,277 @@ 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
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
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}
layer={this.props.layer}
groupFields={fields}
spec={this.props.spec}
onChange={this.changeProperty.bind(this)}
filter={this.props.layer.filter}
properties={this.props.vectorLayers[this.props.layer['source-layer']]}
onChange={f => this.changeProperty(null, 'filter', f)}
/>
);
case "jsoneditor":
return (
<FieldJson
layer={this.props.layer}
onChange={(layer) => {
this.props.onLayerChanged(this.props.layerIndex, layer);
}}
/>
);
</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
);
}}
/>
}
}
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
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>
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" data-wd-key="skip-target-layer-editor" className='more-menu__button' title="Layer options">
<MdMoreVert className="more-menu__button__svg" />
</Button>
<Menu>
<ul className="more-menu__menu">
{Object.keys(items).map((id, 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>
</header>
<Accordion
allowMultipleExpanded={true}
allowZeroExpanded={true}
preExpanded={groupIds}
>
{groups}
</Accordion>
</section>
);
</div>
</header>
<Accordion
allowMultipleExpanded={true}
allowZeroExpanded={true}
preExpanded={groupIds}
>
{groups}
</Accordion>
</section>
}
}

332
src/components/LayerList.jsx
View File

@@ -1,13 +1,13 @@
import classnames from "classnames";
import lodash from "lodash";
import PropTypes from "prop-types";
import React from "react";
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import lodash from 'lodash';
import LayerListGroup from "./LayerListGroup";
import LayerListItem from "./LayerListItem";
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,82 +68,79 @@ 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 = [];
let newGroups=[]
this.groupedLayers().forEach(layers => {
const groupPrefix = layerPrefix(layers[0].id)
const lookupKey = [groupPrefix, idx].join('-')
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;
@@ -151,28 +148,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;
}
@@ -187,16 +184,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();
@@ -209,32 +206,28 @@ 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" &&
@@ -247,107 +240,94 @@ 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"
data-wd-key="skip-target-layer-list"
onClick={this.toggleLayers}
className="maputnik-button"
>
{this.state.areAllGroupsExpanded === true
? "Collapse"
: "Expand"}
</button>
</div>
/>
<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 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>
</section>
);
<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>
</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}
/>
}
}

224
src/components/MapMaplibreGl.jsx
View File

@@ -1,17 +1,19 @@
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";
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'
const IS_SUPPORTED = MapLibreGl.supported();
@@ -22,32 +24,32 @@ function renderPopup(popup, mountNode) {
function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
const backgroundLayer = {
id: "background",
type: "background",
paint: {
"background-color": "#1c1f24",
},
};
const layer = colorHighlightedLayer(highlightedLayer);
if (layer) {
coloredLayers.push(layer);
"id": "background",
"type": "background",
"paint": {
"background-color": '#1c1f24',
}
}
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 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 inspectStyle = {
...originalMapStyle,
sources: sources,
layers: [backgroundLayer].concat(coloredLayers),
};
return inspectStyle;
layers: [backgroundLayer].concat(coloredLayers)
}
return inspectStyle
}
export default class MapMaplibreGl extends React.Component {
@@ -60,7 +62,7 @@ export default class MapMaplibreGl extends React.Component {
options: PropTypes.object,
replaceAccessTokens: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
};
}
static defaultProps = {
onMapLoaded: () => {},
@@ -68,55 +70,51 @@ 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) {
@@ -125,7 +123,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);
}
}
@@ -137,40 +135,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,
@@ -178,58 +176,41 @@ 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()
});
});
@@ -238,32 +219,29 @@ 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)}
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>
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>
}
}
}

24
src/libs/debug.js → src/libs/debug.ts
View File

@@ -1,12 +1,16 @@
import querystring from 'querystring'
interface DebugStore {
[namespace: string]: {
[key: string]: any
}
}
const debugStore = {};
const debugStore: DebugStore = {};
function enabled() {
const qs = querystring.parse(window.location.search.slice(1));
if(qs.hasOwnProperty("debug")) {
return !!qs.debug.match(/^(|1|true)$/);
const qs = new URL(window.location.href).searchParams;
const debugQs = qs.get("debug");
if(debugQs) {
return !!debugQs.match(/^(|1|true)$/);
}
else {
return false;
@@ -17,7 +21,7 @@ function genErr() {
return new Error("Debug not enabled, enable by appending '?debug' to your query string");
}
function set(namespace, key, value) {
function set(namespace: keyof DebugStore, key: string, value: any) {
if(!enabled()) {
throw genErr();
}
@@ -25,7 +29,7 @@ function set(namespace, key, value) {
debugStore[namespace][key] = value;
}
function get(namespace, key) {
function get(namespace: keyof DebugStore, key: string) {
if(!enabled()) {
throw genErr();
}
@@ -38,7 +42,7 @@ const mod = {
enabled,
get,
set
}
};
window.debug = mod;
(window as any).debug = mod;
export default mod;

21
src/libs/zoomcontrol.js
View File

@@ -1,28 +1,27 @@
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() {

13
vite.config.ts
View File

@@ -1,11 +1,22 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import replace from '@rollup/plugin-replace';
export default defineConfig({
server: {
port: 8888
},
plugins: [react()],
plugins: [
replace({
preventAssignment: true,
include: /\/jsonlint-lines-primitives\/lib\/jsonlint.js/,
delimiters: ['', ''],
values: {
'_token_stack:': ''
}
}) as any,
react()
],
define: {
global: "window",
},