CHIIMYEN
95bf5f2c55
## Launch Checklist
- [x] Briefly describe the changes in this PR.
- [x] Link to related issues.
- [ ] Include before/after visuals or gifs if this PR includes visual
changes. — not applicable, nothing visual changes.
- [x] Write tests for all new functionality.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
### What changed
Keyboard shortcuts went dead as soon as the map had focus.
The global `keyup` handler in `App.tsx` gated shortcuts on
`document.activeElement === document.body`. That reads like "the user is
not
typing", but it actually asks "is nothing focused at all". Clicking the
map makes
`.maplibregl-canvas` the active element, so every shortcut stopped
working until the
map was blurred.
The `m` shortcut demonstrates the problem nicely: its entire job is to
focus that
canvas, so pressing `m` silently disabled all shortcuts until `Esc`.
That path is
covered by an existing test (`'m' should focus map`), which is why the
regression
was easy to miss.
### How
`isTextEntryElement()` now answers the question the guard was reaching
for, so
shortcuts are suppressed only for text entry targets:
`input`, `textarea`, `select`, and `contenteditable` — the last one
covering the
CodeMirror editor, which is a `contenteditable` `.cm-content`.
The check stays independent of either renderer's DOM. MapLibre's
`.maplibregl-canvas` and the OpenLayers viewport live in different
structures, so an
allow-list of canvas class names would have fixed one renderer and left
the other
broken.
### Behaviour change
Single-letter shortcuts now also fire while focus is on a button or a
panel, where
previously they did not. That is inherent to making the map case work —
the old
predicate simply excluded everything that was not `document.body`. Per
@HarelM, this
can be reverted if anyone complains.
### Tests
`e2e/keyboard.spec.ts` gains a `while the map has focus` block. Its
`beforeEach`
focuses the canvas through the `m` shortcut and asserts the canvas
really is focused,
then two independent tests check that `!` and `s` still open their
modals.
Verified the new tests fail without the fix:
```
Error: expect(locator).toBeVisible() failed
Locator: locator('[data-wd-key="modal:debug"]').first()
Expected: visible
Error: element(s) not found
```
and pass with it.
Local results:
| Check | Result |
|---|---|
| `npm run lint` | clean |
| `npx vitest run` | 9 files, 50 tests passed |
| `npx vite build --mode=production` | clean |
| `npx playwright test` | 170 passed, 3 failed |
The 3 failures — `modals › open › upload via drag and drop`,
`modals › global state › remove variable` and `modals › global state ›
edit variable key`
— also fail on unmodified `main`, so they are pre-existing and unrelated
to this
change.
Fixes #940
Maputnik
A free and open visual editor for the MapLibre GL styles targeted at developers and map designers.
Usage
- 🔗 Design your maps online at https://www.maplibre.org/maputnik/ (all in local storage)
- 🔗 Use the Maputnik CLI for local style development
- In a Docker, run this command and browse to http://localhost:8888, Ctrl+C to stop the server.
docker run -it --rm -p 8888:8000 ghcr.io/maplibre/maputnik:main
To see the CLI options (for example file watching or style serving) run:
docker run -it --rm -p 8888:8000 ghcr.io/maplibre/maputnik:main --help
You might need to mount a volume (-v) to be able to use these options.
Documentation
The documentation can be found in the Wiki. You are welcome to collaborate!
- 🔗 Study the Maputnik Wiki
- 📹 Design a map from Scratch https://youtu.be/XoDh0gEnBQo
Develop
Maputnik is written in typescript and is using React and MapLibre GL JS.
We ensure building and developing Maputnik works with the current active LTS Node.js version and above.
Check out our Internationalization guide for UI text related changes.
Getting Involved
Join the #maplibre or #maputnik slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the the below guide in order to get familiar with how we do things around here.
Install the deps, start the dev server and open the web browser on http://localhost:8888/.
# install dependencies
npm install
# start dev server
npm run start
If you want Maputnik to be accessible externally use the --host option:
# start externally accessible dev server
npm run start -- --host 0.0.0.0
The build process will watch for changes to the filesystem, rebuild and autoreload the editor.
npm run build
Lint the JavaScript code.
# run linter
npm run lint
npm run lint-css
npm run sort-styles
Tests
End-to-end tests
For E2E testing we use Playwright. The tests live in the e2e directory and drive the app through the MaputnikDriver page object.
The first time you run the tests, install the browser:
npx playwright install chromium
Playwright automatically starts the dev server (npm run start) for you, so you can just run:
npm run test
Some useful options:
# see the tests run in a headed browser
npm run test -- --headed
# run a single spec / filter by title
npm run test -- e2e/map.spec.ts
npm run test -- -g "zoom level"
# open the interactive UI mode
npx playwright test --ui
Running the E2E tests also produces a code-coverage report in coverage/ (collected via istanbul instrumentation of the dev server).
Unit & component tests
Unit tests and component tests run with Vitest; component tests (*.browser.test.tsx) use Vitest's browser mode with the Playwright provider.
npm run test-unit
Release process
- Review
CHANGELOG.md- Double-check that all changes included in the release are appropriately documented.
- To-be-released changes should be under the "main" header.
- Commit any final changes to the changelog.
- Run Create bump version PR by manual workflow dispatch and set the version number in the input. This will create a PR that changes the changelog and
package.jsonfile to review and merge. - Once merged, an automatic process will kick in and creates a GitHub release and uploads release assets.
Sponsors
Thanks to the supporters of the Kickstarter campaign. This project would not be possible without these commercial and individual sponsors. You can see this file's history for previous sponsors of the original Maputnik repo. Read more about the MapLibre Sponsorship Program at https://maplibre.org/sponsors/.
License
Maputnik is licensed under MIT and is Copyright (c) Lukas Martinelli and Maplibre contributors. As contributor please take extra care of not violating any Mapbox trademarks. Do not get inspired by other map studios and make your own decisions for a good style editor.