attachClickAndHoverListeners()

in src/lib/components/molecules/canvas-map/lib/renderers/TextLayerRenderer.js [369:428]


  attachClickAndHoverListeners() {
    if (this.layer.onClick) {
      this._element.addEventListener("click", (event) => {
        if (!event.target) return

        const clickedFeature = this.layer.source
          .getFeatures()
          .find((feature) => event.target.dataset?.featureId === feature.uid)

        if (!clickedFeature) return

        this.layer.onClick(clickedFeature, event)
      })
    }

    if (this.layer.onHover) {
      this._element.addEventListener("pointerover", (event) => {
        if (!event.target) return

        const hoveredFeature = this.layer.source
          .getFeatures()
          .find((feature) => event.target.dataset?.featureId === feature.uid)

        if (!hoveredFeature) return

        const onHoverLeave = this.layer.onHover(hoveredFeature, event)

        if (onHoverLeave) {
          this._element.addEventListener("pointerout", onHoverLeave, {
            once: true,
          })
        }
      })
    }

    if (this.layer.restyleOnHover) {
      this._element.addEventListener("pointerover", (event) => {
        if (!event.target) return

        const hoveredFeature = this.layer.source
          .getFeatures()
          .find((feature) => event.target.dataset?.featureId === feature.uid)

        if (!hoveredFeature) return

        this._hoveredFeature = hoveredFeature
        // TODO: do we need to redraw the whole map here?
        this.layer.dispatcher.dispatch(MapEvent.CHANGE)

        this._element.addEventListener(
          "pointerout",
          () => {
            this._hoveredFeature = undefined
            this.layer.dispatcher.dispatch(MapEvent.CHANGE)
          },
          { once: true },
        )
      })
    }
  }