feat: add context menu by dopenguin · Pull Request #745 · Dataport/polar

dopenguin · 2026-05-26T15:43:31Z

Summary

Adds the possibility for plugins to insert themselves in a context menu by calling addToContextMenu. Entries can be removed by calling removeFromContextMenu.

Instructions for local reproduction and review

Start the snowbox
On Desktop: Right click on the map canvas; on mobile: longpress the map canvas
The context menu will be displayed with 4 entries; real entries will follow once draw or routing are implemented

Known issues

On mobile, a pin is still being set as OpenLayers already fires a singleclick-event before the 1000ms of the longPressHammer have elapsed.

Relevant tickets, issues, et cetera

Resolves: #403
Blocked by: #733, #734, #748

Also, remove unnecessary props variables.

Also replaces previous KernBlockButton.ce.vue implementation.

github-actions · 2026-05-26T15:46:26Z

PR Preview Action v1.8.1
🚀 View preview at https://Dataport.github.io/polar/pr-preview/pr-745/
Built to branch `gh-pages` at 2026-07-02 15:00 UTC. Preview will be ready when the GitHub Pages deployment is complete.

By using "role" the semantic list elements are no longer needed.

# Conflicts: # src/components/kern/KernBlockButtonCheckbox.ce.vue # src/components/kern/KernBlockButtonRadioGroup.ce.vue # src/core/types/moveHandle.ts

# Conflicts: # src/core/components/PolarContainer.ce.vue # src/core/stores/main.ts

# Conflicts: # src/core/components/PolarContainer.ce.vue

…pdated

warm-coolguy · 2026-06-12T08:16:06Z

dibs

warm-coolguy

📫 @dopenguin

warm-coolguy · 2026-06-15T11:54:01Z

+			&:focus {
+				outline: auto;
+			}
+		}


We shouldn't initially display the focus on right-click, as it's confusing to some users. I've checked what Windows does and what other component libraries do, and they either have an "invisible initial" element at first that holds the focus so that pressing down goes to the first one, or have the first element selected, but not visibly so.

The latter would be the difference between :focus and :focus-visible, which I feel is preferable to the current state and easy to implement.

So having the focus on the first element, but not having the focus visible here, is preferrable?

Testing the behaviour with multiple buttons can be achieved by adding the following snippet to the snowbox index.js

const buttons = [ { id: 'color', icon: 'kern-icon--palette', text: 'Farben anpassen', callback: (c) => console.warn('Colour', c), }, { id: 'path', icon: 'kern-icon--rebase-edit', text: 'Pfad anpassen', callback: (c) => console.warn('Path', c), }, { id: 'duplicate', icon: 'kern-icon--content-copy', text: 'Duplizieren', callback: (c) => console.warn('Duplicate', c), }, { id: 'delete', icon: 'kern-icon--delete', text: 'Löschen', callback: (c) => console.warn('Delete', c), color: 'oklch(50.78% 0.202 29.22)', group: 'delete', }, ] buttons.forEach((b) => map.store.addToContextMenu(b))

So having the focus on the first element, but not having the focus visible here, is preferrable?

Yeah, or, if you dislike that, there's the other option I pointed out.

However, :focus-visible is explicitly built for this.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible

It even uses a "variety of heuristics".

warm-coolguy · 2026-06-15T11:58:05Z

+			justify-content: start;
+
+			&:focus {
+				outline: auto;


The outline does not match the button style.

With increased font size, you can easily see there's a small gap there in the top-left corner. It's also visible without increased font size, and the differing border-radius is also discernible anyway. Just posting this since it makes it very visible.

While we're here, the outline does use a different style than e.g. the icon menu. I'd prefer it if it used the same effects. Example for colour:

The border-radius of the card now matches the buttons 7120ee5

The outline is the default outline of the browser. The outline of the icon buttons of the IconMenu use a completely different approach so that an active button can be highlighted as well.

The outline of the icon buttons of the IconMenu use a completely different approach so that an active button can be highlighted as well.

Impressive. Very nice. Can you change it?

Since the outline is also pretty much on the map background, and I don't fancy multiple outline styles in one product, they should look the same.

We can also make it an issue.

What style should we be using?
KERN currently works with

outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 2px;

This approach wouldn't really work with the IconMenu-Buttons. So should we be deviating completely and just use the styling we currently see on the PolarIconButton?

warm-coolguy · 2026-06-15T12:08:19Z

+
+	mainStore.map
+		.getTargetElement()
+		.addEventListener('contextmenu', openContextMenu)


Here and Line findLineWith("// Suppresses the context menu of the browser"):

This effectively overrides the possibility to "normally" open the native context menus on a canvas, that is, however, pretty useful.

I've checked and pressing Shift+RightClick on Firefox circumvents this problem: https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event (Somewhere down there in the initial chapter.)

I figure that this same behaviour could be used in all browsers with little implementation effort so that users can use the native context menu anyway. A small hint at the bottom of the context menu would be helpful, too. What do you think?

That is intended and in line with how both Google Maps and OpenStreetMap handle their contextmenu.

I don't think that implementing browser specific ways to open the default contextmenu of the browser is something we should be doing.

Since most browser don't implement it at all and we block the browser default behaviour, I think we should.

I sent an inquiry to our user experience human.

warm-coolguy · 2026-06-16T06:58:56Z


 		function setupPlugin() {
 			coreStore.map.on('pointermove', updatePointerPosition)
+			coreStore.addToContextMenu({


Do we need configurable context menus? Letting each plugin just do it directly is a solution, albeit not a very dynamic one. I'm also thinking about initialization order and how this affects the view. 🤔

However, this is a complex topic. My first idea was that core, after initialization of all plugins, calls getMenuEntries on all (in a new config.contextMenu) configured plugins, which is a new optional API endpoint ... but then the context menu would be a little static, since especially tools like draw will want to add and remove entries depending on their context. Bleh. Maybe simple ordering the groups in global config is enough.

What do you think about this? Is it a topic we should discuss now, or postpone to later?

I say we postpone this. I even suggest we write an issue for this to tackle this after draw has been migrated.

# Conflicts: # src/core/types/moveHandle.ts # src/core/utils/map/setupMarkers.ts # src/plugins/pointerPosition/store.ts

dopenguin · 2026-07-01T14:49:41Z

📫 @dopenguin

Except #745 (comment), I've tackled every thread. That is something, I'll need some more time for.

🏓 @warm-coolguy until then

…clarification of heritage

warm-coolguy · 2026-07-02T11:58:57Z

📫 @dopenguin

Except #745 (comment), I've tackled every thread. That is something, I'll need some more time for.

🏓 @warm-coolguy until then

🕺 @dopenguin

dopenguin added 6 commits May 26, 2026 15:44

refactor: update kern components to use slots in favour of props

cb857ae

Also, remove unnecessary props variables.

refactor: ease access of props

cfd07b1

refactor: change label prop to slot in PolarInput as well

e1de3f7

refactor: add reusable KernButton component to reduce duplicated code

285f9ec

Also replaces previous KernBlockButton.ce.vue implementation.

fix(iconMenu): use updated type

21d1116

feat: add first basic implementation of a polar specific context menu

400d74f

dopenguin added this to the POLAR@3 milestone May 26, 2026

dopenguin self-assigned this May 26, 2026

dopenguin added the enhancement New feature or request label May 26, 2026

dopenguin added 20 commits May 26, 2026 18:11

feat: add basic context menu store structure

3cdf8bf

fix: correctly access the show parameter in PolarContainer

2f7abdc

feat: implement possibility to add entries to the context menu

5f3a34a

refactor: update imports

96878f1

fix: correctly place context menu

b3dad0b

feat: add possibility to close the context menu by pressing escape

b09bf27

feat: add aria roles to context menu elements

fd8eb90

refactor: remove redundant dom elements

c5b1994

By using "role" the semantic list elements are no longer needed.

fix: move role="menu" to the correct element

8a720b8

feat: focus first menuitem when mounted

d67b34c

feat: add expected arrow keys navigability

9a2021e

fix: use correct store

8fe380f

Merge branch 'refactor/kern-btn' into vue3/feat-context-menu

9b1f058

# Conflicts: # src/components/kern/KernBlockButtonCheckbox.ce.vue # src/components/kern/KernBlockButtonRadioGroup.ce.vue # src/core/types/moveHandle.ts

refactor: remove redundant *.ts

9259f28

fix(core): remove cycles that were hidden by vite imports

af978e5

Merge branch 'fix/remove-cycles' into vue3/feat-context-menu

85e359c

# Conflicts: # src/core/components/PolarContainer.ce.vue # src/core/stores/main.ts

Merge branch 'refactor/kern-btn' into vue3/feat-context-menu

c8f67db

# Conflicts: # src/core/components/PolarContainer.ce.vue

feat: add possibility to update the colour of a menu entry

8b5f578

feat: add description for context menu configuration

31b092a

fix: update colour mechanism of 8b5f578 so the colour actually gets u…

a9da54c

…pdated

warm-coolguy removed request for a team, czirkelbach, oeninghe-dataport and raschju June 12, 2026 08:15

warm-coolguy requested changes Jun 16, 2026

View reviewed changes

Merge branch 'refactor/kern-btn' into vue3/feat-context-menu

b62255b

Base automatically changed from refactor/kern-btn to next June 22, 2026 12:04

warm-coolguy requested a review from a team June 22, 2026 12:04

dopenguin and others added 15 commits June 22, 2026 17:22

Merge branch 'next' into vue3/feat-context-menu

458b81f

Merge branch 'next' into vue3/feat-context-menu

b0ea4d7

# Conflicts: # src/core/types/moveHandle.ts # src/core/utils/map/setupMarkers.ts # src/plugins/pointerPosition/store.ts

fix(core): update import order according to new linting rule from #809

792232d

Merge branch 'next' into vue3/feat-context-menu

ce5101a

Merge branch 'next' into vue3/feat-context-menu

eef51af

Merge branch 'next' into vue3/feat-context-menu

9586c79

fix: remove background-color override introduced in d7c108b

7bdcdd1

fix: update border-radius of the card to match the buttons

7120ee5

fix: remove confusing, one-sided focus circles

a030005

refactor: remove redundant css variable default

21faad0

fix: make the text and icon of the contextmenu buttons unselectable

3bd1290

refactor: move open and dismissal logic of the contextmenu to the store

f846cba

fix(filter): respects have been paid

9d79323

refactor: remove unnecessary branching

4300635

fix: remove unused import

3788e94

refactor: rename --kern-btn-text-color to --polar-btn-text-color for …

0d2ee9e

…clarification of heritage

dopenguin added 2 commits July 2, 2026 15:26

Merge branch 'next' into vue3/feat-context-menu

1ef4e21

Merge branch 'next' into vue3/feat-context-menu

2e55ec4

dopenguin mentioned this pull request Jul 2, 2026

feat(routing): migrate plugin #842

Draft

Uh oh!

Conversation

dopenguin commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Instructions for local reproduction and review

Known issues

Relevant tickets, issues, et cetera

Uh oh!

github-actions Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-07-02 15:00 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

warm-coolguy commented Jun 12, 2026

Uh oh!

warm-coolguy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dopenguin Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

warm-coolguy Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

warm-coolguy Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dopenguin commented Jul 1, 2026

Uh oh!

warm-coolguy commented Jul 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dopenguin commented May 26, 2026 •

edited

Loading

github-actions Bot commented May 26, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-07-02 15:00 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

dopenguin Jul 1, 2026 •

edited

Loading

warm-coolguy Jul 2, 2026 •

edited

Loading

warm-coolguy Jun 16, 2026 •

edited

Loading