Skip to content

fix(Drawing/Measures) : correction du dessin et des infobulles sous Safari - #574

Open
julsql wants to merge 2 commits into
IGNF:mainfrom
julsql:fix/573-safari-drawing-click
Open

fix(Drawing/Measures) : correction du dessin et des infobulles sous Safari#574
julsql wants to merge 2 commits into
IGNF:mainfrom
julsql:fix/573-safari-drawing-click

Conversation

@julsql

@julsql julsql commented Aug 20, 2026 •
edited
Loading

Copy link
Copy Markdown

Sous Safari (macOS), le widget Drawing est inutilisable : le clic simple n'ajoute aucun point au tracé (ligne / polygone), et le double-clic sélectionne le texte de l'infobulle « Double-cliquer pour terminer » au lieu de terminer la saisie. Le même scénario fonctionne sous Firefox et Chrome. Voir #573 pour avoir le contexte entier du problème (captures d'écran à l'appui).

Trois causes cumulées :

  1. ol/ol.css — qui pose user-select: none sur .ol-viewport — n'est pas forcément chargée par l'application hôte. Sans elle, le mousedown sur la carte démarre une sélection de texte ; Safari émet alors un pointercancel et ol/interaction/Draw ne reçoit jamais son pointerup, donc aucun point n'est ajouté. Firefox et Chrome n'annulent pas le pointeur dans ce cas.
  2. ol/Overlay applique par défaut class="ol-overlay-container ol-selectable", ce qui réactive explicitement la sélection de texte sur les infobulles de dessin et de mesure, même quand ol.css est chargée.
  3. Dans Drawing.js, les Overlay d'infobulle sont créés sans stopEvent: false, contrairement à ceux de Measures.js : ils atterrissent donc dans ol-overlaycontainer-stopevent et bloquent la propagation des événements vers la carte.

La PR corrige donc les trois points :

  • stopEvent: false sur les infobulles de Drawing ;
  • className: "ol-overlay-container" sur les infobulles de Drawing et Measures, pour supprimer la classe ol-selectable posée par défaut ;
  • user-select: none sur .ol-viewport dans GPFgeneralWidget.css, en filet de sécurité si ol/ol.css n'est pas chargée par l'application hôte, avec réactivation de user-select: text sur .ol-selectable, les input / textarea des widgets et les [contenteditable] pour ne pas régresser sur la saisie dans les formulaires ;
  • user-select: none et pointer-events: none sur .gpf-draw-linestring-tooltip et .GPmeasureTooltip.

Aucun changement d'API publique, aucune nouvelle dépendance.

Pour tester, via npm run sample:modules : https://localhost:8080/samples/tests/Drawing/pages-ol-drawing-modules-dsfr-default.html

⚠️ Avant de merge sur main, il serait intéressant de tester sur d'autres configurations (autres navigateurs et autres OS, a minima Windows et les tablettes / mobiles iOS). Les tests n'ont été effectués que sous macOS (Safari, Firefox et Google Chrome). À vérifier également la non-régression sur la saisie de texte dans les widgets (SearchEngine, description d'un point de dessin, formulaires Isocurve / Route).

fix-bug

Close #573

@julsql julsql changed the title fix(Drawing/Measures): make drawing work in Safari fix(drawing/measures) : correction du dessin et des infobulles sous Safari Aug 20, 2026
@julsql julsql changed the title fix(drawing/measures) : correction du dessin et des infobulles sous Safari fix(Drawing/Measures) : correction du dessin et des infobulles sous Safari Aug 20, 2026
@julsql
julsql force-pushed the fix/573-safari-drawing-click branch from 03e8629 to ba96069 Compare August 20, 2026 19:20
@lowzonenose
lowzonenose requested a review from iamvdo August 21, 2026 13:29
@lowzonenose lowzonenose mentioned this pull request Aug 21, 2026
Open
3 tasks
@lowzonenose
lowzonenose requested a lite review from Copilot August 25, 2026 22:08
Copilot AI reviewed Aug 25, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Cette PR corrige un dysfonctionnement Safari (macOS) où les interactions de dessin/mesure OpenLayers sont perturbées par la sélection de texte (pointercancel / double-clic) et par des overlays qui interceptent les événements.

Changes:

  • Ajout de stopEvent: false sur les infobulles du widget Drawing pour ne plus bloquer la propagation des événements vers la carte.
  • Forçage de className: "ol-overlay-container" sur les overlays d’infobulle (Drawing + Measures) afin de supprimer la classe ol-selectable ajoutée par défaut.
  • Ajout de règles CSS de “filet de sécurité” (user-select: none / pointer-events: none) pour empêcher la sélection de texte sur le viewport OpenLayers et sur les tooltips.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/packages/CSS/GPFgeneralWidget.css Ajoute un fallback CSS pour désactiver la sélection de texte sur le viewport OL et la rétablir sur les zones de saisie.
src/packages/CSS/Controls/Measures/GPFmeasureToolTip.css Rend la tooltip de mesure non sélectionnable et non interactive (pointer-events: none).
src/packages/CSS/Controls/Drawing/GPFdrawing.css Rend la tooltip de dessin non sélectionnable et non interactive (pointer-events: none).
src/packages/Controls/Measures/Measures.js Force la classe d’overlay OL sans ol-selectable pour les tooltips de mesure/aide.
src/packages/Controls/Drawing/Drawing.js Ajoute stopEvent: false et force la classe d’overlay OL sans ol-selectable pour les tooltips de dessin.
DRAFT_CHANGELOG.md Documente le correctif Safari côté Drawing/Measures.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/packages/CSS/GPFgeneralWidget.css Outdated
julsql and others added 2 commits September 3, 2026 00:25
@julsql
fix(Drawing/Measures): make drawing work in Safari
b994ed3 
In Safari, clicking on the map did not add any point to the sketch and
double-clicking selected the tooltip text instead of finishing the drawing.

Three cumulative causes:

- `ol/ol.css` (which sets `user-select: none` on `.ol-viewport`) is not
  guaranteed to be loaded by the host application. Without it, `mousedown`
  on the map starts a text selection; Safari then fires `pointercancel` and
  `ol/interaction/Draw` never receives its `pointerup`, so no point is added.
- `ol/Overlay` defaults to `class="ol-overlay-container ol-selectable"`, which
  explicitly re-enables text selection on the drawing and measure tooltips.
- The `Drawing` tooltip overlays were created without `stopEvent: false`
  (unlike the `Measures` ones), so they landed in `ol-overlaycontainer-stopevent`
  and blocked event propagation to the map.

Fixes:

- Drawing: add `stopEvent: false` and an explicit `className` without
  `ol-selectable` on both tooltip overlays (line and polygon).
- Measures: add the same explicit `className` on `measureTooltip` and
  `helpTooltip`.
- GPFgeneralWidget.css: fall back to `user-select: none` and
  `-webkit-touch-callout: none` on `.ol-viewport` / `.ol-unselectable`, while
  restoring `user-select: text` on `.ol-selectable`, widget inputs/textareas
  and `[contenteditable]` elements.
- GPFdrawing.css / GPFmeasureToolTip.css: `user-select: none` and
  `pointer-events: none` on the tooltips.

Closes IGNF#573
@julsql @claude
fix(CSS): couverture complète des éléments contenteditable pour la sé…
a92efd0 
…lection de texte

Le sélecteur [contenteditable="true"] ne couvrait ni <div contenteditable>
(attribut sans valeur) ni contenteditable="plaintext-only".

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qw67qkemqktpKgu8gG8x3Z
@julsql
julsql force-pushed the fix/573-safari-drawing-click branch from 3aa66e8 to a92efd0 Compare September 2, 2026 22:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort, defaults to Lite
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@iamvdo iamvdo Awaiting requested review from iamvdo

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

bug

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[bug] Drawing / Measures : impossible de tracer sous Safari, le double-clic sélectionne le texte de l'infobulle

3 participants

@julsql @lowzonenose