- Replaces #1870, which replaced #1682, #1677
This mostly uses the code from there and addresses the comments I've
left. I didn't change the code much.
## Launch Checklist
Makes the sidebar panel resizable
<img width="707" height="511" alt="image"
src="https://github.com/user-attachments/assets/d010df38-faac-441c-bf7f-a4960e471c61"
/>
- [x] Briefly describe the changes in this PR.
- [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
- [x] Write tests for all new functionality.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
---------
Co-authored-by: Bart Louwers <bart.louwers@gmail.com>
#1351 made `styleStore` initialization asynchronous in
`componentDidMount`. `setStyle` currently treats `toolbar:link`
appearing as the signal that loading is complete, but if the style
network request (`empty-style.json` from jsdelivr) takes over ~1s, the
`toolbar:link` can appear while `styleStore` is still null (because the
request has not finished). Subsequent `saveStyle` calls in tests then
silently do nothing, causing test failures (3 in #2157, and often 20+ on
my machine).
Changes are:
1. Mock the default empty style to avoid slow network E2E failures.
2. Also cap Playwright workers at 4 to avoid overloading Chromium on
high-core machines.
Fixes#2158.
## Launch Checklist
<!-- Thanks for the PR! Feel free to add or remove items from the
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.~~
- [ ] ~~Write tests for all new functionality.~~
- [ ] ~~Add an entry to `CHANGELOG.md` under the `## main` section.~~
(only minor test infra fix)
Co-authored-by: liuly <me@liuly.moe>
Co-authored-by: Harel M <harel.mazor@gmail.com>
## 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
## Launch Checklist
<!-- Thanks for the PR! Feel free to add or remove items from the
checklist. -->
When a fixed paint value is converted to a zoom function, Maputnik
creates exactly two stops.
<img width="362" height="226" alt="image"
src="https://github.com/user-attachments/assets/209aebbf-7bb3-4422-b0c7-1019e20a9ddb"
/>
Deleting either one of those two stops leaves a single remaining value.
During the transition back to the ordinary field editor, `ZoomProperty`
can render with `stops` undefined. It previously called `.map`
unconditionally, causing the editor to crash.
<img width="2551" height="1248" alt="image"
src="https://github.com/user-attachments/assets/f5c2af59-dcae-4ffe-8245-f175eea9c843"
/>
This PR guards the stop list with optional chaining. The change only
protects the render path and does not alter zoom-function conversion or
value persistence.
Now, the remaining stop's value will be restored after deleting the
other stop:
<img width="367" height="168" alt="image"
src="https://github.com/user-attachments/assets/8d13236b-6140-451b-8613-0bc5f11893de"
/>
The regression test covers `circle-opacity`:
1. Convert a fixed value to a zoom function.
2. Change the second stop's value.
3. Delete the first of the two stops.
4. Verify that the ordinary field editor reappears.
5. Verify that the remaining stop's value is restored.
6. Edit the restored field and verify that the style updates
successfully.
- [x] Briefly describe the changes in this PR.
- [ ] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
- [x] Write tests for all new functionality.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
Deleting a layer changes the starting indices of later groups, so their
stored expansion state no longer matches. Preserve that state through
surviving layer IDs when rebuilding the group keys.
This keeps expanded groups open after deleting an earlier layer or the
first layer of a group. Separate groups with the same prefix retain
their own states; if deletion joins two groups, the merged group stays
expanded when either was expanded.
- Fixes#1781.
Adds five deletion regression tests, a small style fixture, and a
changelog entry.
Validation:
- All 33 layer-list E2E tests and 50 unit tests pass.
- Lint and the production build, including TypeScript checking, pass.
- Manually checked OSM Liberty: all 15 groups remain expanded after
deleting the background layer.
- The full E2E suite reports 160 passing tests and one failure in
`modals > open > upload` (`Could not get styleItem from localStorage`).
The same failure reproduces with the original production code restored.
---------
Co-authored-by: Harel M <harel.mazor@gmail.com>
- Fixes#1675
## Problem
In the layer list, the show/hide button's `title` tooltip named the
layer's
current visibility instead of what a click does. A visible layer's
button read
`show` while clicking it hides the layer, and a hidden layer's button
read
`hide` while clicking it shows the layer — exactly reversed.
`LayerListItem.tsx` derived a single value from the layer state:
```ts
const visibilityAction = visibility === "visible" ? "show" : "hide";
```
and passed it to `IconAction` as `action`, which `IconAction` used for
three
different things: choosing the icon, building the `--show`/`--hide` CSS
modifier, and rendering `title={this.props.action}`. The first two are
correct
as a state indicator; only the tooltip needs the opposite verb.
## Change
- `IconAction` gets an optional `title` prop and falls back to `action`
when it
is not given, so the delete and duplicate buttons are unchanged.
- `LayerListItem` keeps `visibilityAction` (icon +
`maputnik-layer-list-icon-action__visibility--hide`
CSS modifier, which `_layer.scss` relies on to keep the button visible
for
hidden layers) and adds `visibilityTitle` for the inverted tooltip.
No icon, class name or click behaviour changes.
## Test
New regression test in `e2e/layers-list.spec.ts`: it asserts the button
is
titled `hide` while the layer is visible, clicks it, and asserts it is
titled
`show` once the layer is hidden. Against the unpatched component the
first
assertion fails with `Expected: "hide"` / `Received: "show"`,
reproducing the
reported behaviour.
`npm run lint`, `npx tsc --noEmit`, `npx vitest run` (50 tests) and
`npx playwright test e2e/layers-list.spec.ts` (28 tests) all pass.
## Note
The tooltips in this component (`delete`, `duplicate`, `show`, `hide`)
are
plain English literals and are not run through `t()` today, so this
change
keeps them as-is rather than introducing translation keys for one
button. Also
worth flagging separately: these buttons carry `aria-hidden="true"`, so
the
`title` never reaches assistive technology at all — out of scope here,
but it
means the label is a mouse-hover tooltip only.
## Launch Checklist
This PR increases coverage by adding unit tests to lib folde, replace
the skipped end to end placeholder with actual tests and adds more end
to end tests.
This was mostly done by AI (Claude opus 4.8) and I reviewed it and
requested changes where needed.
- [x] Briefly describe the changes in this PR.
- [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
- [x] Write tests for all new functionality.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
## Launch Checklist
This PR replaces cypress with playwright.
<img width="1907" height="933" alt="image"
src="https://github.com/user-attachments/assets/b52075b3-eb3b-45dc-93dc-8c5e9cfd35dd"
/>
I hope this will make the end-to-end debugging and fixing easier due to
the async await support of playwright which is missing in cypress.
This is a pure refactoring change.
- [x] Briefly describe the changes in this PR.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
## Launch Checklist
Renames the e2e test and reduces changes as a preparation step from
playwright in the following PR:
- #1988
This is to keep as much history as possible.
<img width="1907" height="933" alt="image"
src="https://github.com/user-attachments/assets/b52075b3-eb3b-45dc-93dc-8c5e9cfd35dd"
/>
- [x] Briefly describe the changes in this PR.
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Harel MandBart Louwers
CHIIMYEN
Nikita Maximilian GrimmandHarel M
Jamal Ali
