Openlayers - Select Interaction - don't change style for point geometries with ol.style.Icon and ol.style.FontSymbol

Question

I'm trying not to change style during the selection of point geometries that have style ol.style.Style in which ol.style.Icon is configured in some cases and ol.style.FontSymbol in others

ol.style.Icon example https://www.opengis.it/ente/demo/styles/StruttureSensibili_style.js

its source https://www.opengis.it/ente/demo/layers/StruttureSensibili.js

its layer

    var format_StruttureSensibili = new ol.format.GeoJSON();
    var features_StruttureSensibili = format_StruttureSensibili.readFeatures(json_StruttureSensibili, 
                {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:25832'});
    var jsonSource_StruttureSensibili = new ol.source.Vector({
            });
    jsonSource_StruttureSensibili.addFeatures(features_StruttureSensibili);
    var lyr_StruttureSensibili = new ol.layer.Vector({
                    declutter: false,
                    source:jsonSource_StruttureSensibili, 
                    style: style_StruttureSensibili,
                    permalink: "StruttureSensibili",
                    popuplayertitle: "Strutture Sensibili",
                    interactive: true,
        title: "Strutture Sensibili"
            });

ol.style.FontSymbol example https://www.opengis.it/a_opengis/opengis_fontsymbol.js

I wrote this code, how come it doesn't work?

    // Function to check if a feature has FontSymbol or Icon style
    function hasFontSymbolOrIconStyle(feature) {
      var styles = feature.getStyle();
      
      if (Array.isArray(styles)) {
        return styles.some(function(style) {
          var image = style.getImage();
          return (
            (style instanceof ol.style.Style &&
              (image instanceof ol.style.FontSymbol ||
                image instanceof ol.style.Icon)) ||
            image instanceof ol.style.FontSymbol ||
            image instanceof ol.style.Icon
          );
        });
      }
      
      return false;
    }
    
    // Feature Popup Select interaction
    var popupselect = new ol.interaction.Select({
      hitTolerance: 5,
      multi: true,
      condition: ol.events.condition.singleClick,
      style: function(feature, resolution) {
        if (hasFontSymbolOrIconStyle(feature)) {
          // Return null to use the default style for point geometries with FontSymbol or Icon style
          return null;
        } else {
          // Apply the highlightPopupStyle for other geometries
          return highlightPopupStyle;
        }
      }
    });
    
    map.addInteraction(popupselect);

Answer 1

Having a style function on the layer makes the solution easier as the select style cannot overwrite it on the features, so you can call the layer style function inside the select style function and return that result if you need to:

function hasFontSymbolOrIconStyle(feature, resolution) {
  var styles = layer.getStyleFunction()(feature, resolution);
  
  if (Array.isArray(styles)) {
    return styles.some(function(style) {
      var image = style.getImage();
      return (
        (style instanceof ol.style.Style &&
          (image instanceof ol.style.FontSymbol ||
            image instanceof ol.style.Icon)) ||
        image instanceof ol.style.FontSymbol ||
        image instanceof ol.style.Icon
      );
    });
  }
  
  return false;
}

// Feature Popup Select interaction
var popupselect = new ol.interaction.Select({
  hitTolerance: 5,
  multi: true,
  condition: ol.events.condition.singleClick,
  style: function(feature, resolution) {
    if (hasFontSymbolOrIconStyle(feature, resolution)) {
      // Return null to use the default style for point geometries with FontSymbol or Icon style
      return layer.getStyleFunction()(feature, resolution);
    } else {
      // Apply the highlightPopupStyle for other geometries
      return highlightPopupStyle;
    }
  }
});

Also testing the output from feature.getStyle() would not have worked as expected because it would have been undefined.