Presence of drawtools breaks tooltips

[StefanBrand]

Steps to reproduce

1. Add eox-drawtools to a map
2. Tooltips in the map break.
3. Draw polygon
4. Tooltip appears for the drawn shape (possibly related to Hardcoded interactions interfere with existing interactions in map #594, but I was not able to successfully apply the workaround)

Versions

@eox/map@1.17.0
@eox/drawtools@0.12.0

Example

CodeSandBox: https://codesandbox.io/p/devbox/2hlkx8

<script setup lang="ts">
import "@eox/map";
import "@eox/drawtools";

import { ref, onMounted } from "vue";

let drawtools = ref({});
const layers = ref();

onMounted(async () => {
  layers.value = [
    {
      type: "Vector",
      source: {
        type: "Vector",
        url: "https://openlayers.org/data/vector/ecoregions.json",
        format: "GeoJSON",
      },
      interactions: [
        {
          type: "select",
          options: {
            id: "selectInteraction",
            condition: "pointermove",
            style: { "stroke-color": "red", "stroke-width": 3 },
          },
        },
      ],
    },
  ];

  console.log(document.querySelector("eox-map"));
  console.log(layers.value);
  document.querySelector("eox-map").layers = layers.value || [];
});
</script>

<template>
  <div>
  <eox-map
    .center="[15,48]"
    .zoom="4"
    id="tooltipTest"
    style="width: 300px; height: 300px"
  >
    <eox-map-tooltip></eox-map-tooltip>
  </eox-map>
    
  <eox-drawtools
    id="drawtools"
    .allowModify="true"
    .multipleFeatures="true"
    .showList="true"
    .type='"Polygon"'
    .onDrawupdate="() => {console.log(data.value)}"
    for="eox-map"
  >
  </eox-drawtools>
</div>
</template>

<style scoped></style>

[RobertOrthofer]

After a short look I think the main issue here is that the eox-drawtools adds another select-interaction to the map with pointermove-condition, but we only have a single overlay for tooltips in the map, since multiple tooltips at the pointer position at the same time don't really make sense.

The conflicting select-interaction of the drawtools removes the overlay here, because there are no features of the drawlayer without drawing them.

Without testing it, i think the easiest solution should be to set one of the interactions inactive by calling eoxMap.selectInteractions['yourSelectInteraction'].setActive(false) when you don't want it, the other one should work fine then.

Selections in the eoxMap are designed to work for one layer only, as they are part of the layer in the definition json. Multi-layer tooltips would require some work (also conceptually) and a clean implementation might need a change in api. Maybe having a tooltip-interaction on it's own that supports multliple layers instead of (mis)using the select-interaction with pointermove-condition could also be a useful feature.

[silvester-pari]

I started experimenting with an approach that allows the tooltip to be applied to a specific layer. This would allow still having multiple interaction layers, but the tooltip could be "attached" to a specific one. By default the tooltip would be attached to the topmost layer: #1399

What do you think?

[RobertOrthofer]

There are many places where this could be handled, doing so in the tooltip-element is fine by me.

This also means that the drawtools sometimes have a tooltip and sometimes they don't, based on a setting that's not on the drawtools themselves, which might be surprising

[silvester-pari]

Stefan raised a good point, this proposed solution does not improve on the fact that for drawtools layers, there shouldn't be a tooltip by default in the first place.

@RobertOrthofer can you think of a way of just disabling the tooltip for a specific layer (in this case the one created by drawtools), but keeping the pointermove handling (for hover styling)? Something like a tooltip: false property on the created layer, which tells the map to use any other layer (ideally overrideable by layer id as in #1399) for the tooltip?

Example (schematic):

layer 1
  id: one
  ...tooltip: false
layer 2
  id: two
layer 3
  id: three

eox-map
  eox-map-tooltip --> tooltip shows for layer 2

eox-map
  eox-map-tooltip layer="three" --> tooltip shows for layer 3

[RobertOrthofer]

Sure, do you want the tooltip to be false by default? I can imagine that most of the time the use would expect no tooltip if they only add the select-interaction, since a tooltip would most likely require additional work (at least formatting) by the user anyways.

On the other hand, that would mean a change in the API :/

[silvester-pari]

I think it's great that setting up a tooltip is so easy now - just create a layer with a select interaction and add a tooltip element to the DOM. I would rather say for the specific case where there are multiple select interactions, it should be possible to turn the tooltip off in certain occasions. So I'd propose to leave it true by default, but allow setting it false.