fixed(display): Trigger PointerEvents for Point Styles on Polygon geo…

…metries Signed-off-by: Tim Deubler <[email protected]>
heremaps · Aug 20, 2024 · 58c1f0a · 58c1f0a
1 parent b3b2c0e
commit 58c1f0a
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 20 deletions.
diff --git a/packages/display/src/displays/styleTools.ts b/packages/display/src/displays/styleTools.ts
@@ -20,8 +20,8 @@
 import {wrapText} from './textUtils';
 import {getRotatedBBox} from '../geometry';
 import {GlyphManager} from './webgl/GlyphManager';
-import {Expression, ExpressionParser, JSONExpression} from '@here/xyz-maps-common';
-import {Feature, StyleZoomRange, webMercator, Style, StyleGroup, LayerStyle} from '@here/xyz-maps-core';
+import {Expression, ExpressionParser, geometry as geometryUtils} from '@here/xyz-maps-common';
+import {Feature, StyleZoomRange, webMercator, Style, StyleGroup, GeoJSONCoordinate} from '@here/xyz-maps-core';
 import {Color} from '@here/xyz-maps-common';
 import toRGB = Color.toRGB;
 import {StyleExpressionParser} from './Layers';
@@ -567,6 +567,19 @@ const parseStyleGroup = (styleGroup: readonly(Style & { __p?: true })[], expPars
     return styleGroup;
 };
 
+export const getPolygonCenter = (style: Style, feature: Feature, zoom: number) => {
+    const anchor = getValue('anchor', style, feature, zoom);
+    let center;
+    if (anchor == 'Centroid') {
+        const {geometry} = feature;
+        center = geometry._c = geometry._c || geometryUtils.centroid(<GeoJSONCoordinate[][]>(geometry.type == 'Polygon' ? geometry.coordinates : geometry.coordinates[0]));
+    } else {
+        const {bbox} = feature;
+        center = [bbox[0] + (bbox[2] - bbox[0]) / 2, bbox[1] + (bbox[3] - bbox[1]) / 2];
+    }
+    return center;
+};
+
 export {
     getValue,
     parseSizeValue,

diff --git a/packages/display/src/displays/webgl/buffer/createBuffer.ts b/packages/display/src/displays/webgl/buffer/createBuffer.ts
@@ -19,7 +19,7 @@
 
 import {geometry, ExpressionParser, JSONExpression, TaskManager} from '@here/xyz-maps-common';
 import {GeometryBuffer} from './GeometryBuffer';
-import {getValue, parseStyleGroup} from '../../styleTools';
+import {getPolygonCenter, getValue, parseStyleGroup} from '../../styleTools';
 import {Feature, GeoJSONCoordinate, LayerStyle, LinearGradient, StyleGroup, Tile, TileLayer, webMercator} from '@here/xyz-maps-core';
 import {Layer, StyleExpressionParser} from '../../Layers';
 import {CollisionGroup, FeatureFactory, GroupMap} from './FeatureFactory';
@@ -77,17 +77,7 @@ const handlePolygons = (
             }
         } else if (multiIndex == 0) {
             const {bounds} = tile;
-            const {bbox} = feature;
-            const anchor = getValue('anchor', style, feature, zoom);
-            let center;
-
-            if (anchor == 'Centroid') {
-                const {geometry} = feature;
-                center = geometry._c = geometry._c || centroid(<GeoJSONCoordinate[][]>(geometry.type == 'Polygon' ? geometry.coordinates : geometry.coordinates[0]));
-            } else {
-                center = [bbox[0] + (bbox[2] - bbox[0]) / 2, bbox[1] + (bbox[3] - bbox[1]) / 2];
-            }
-
+            const center = getPolygonCenter(style, feature, zoom);
             const [cx, cy] = center;
 
             if (cx >= bounds[0] && cy >= bounds[1] && cx < bounds[2] && cy < bounds[3]) {

diff --git a/packages/display/src/search/Hit.ts b/packages/display/src/search/Hit.ts
@@ -17,7 +17,15 @@
  * License-Filename: LICENSE
  */
 
-import {getMaxZoom, getPixelSize, getLineWidth, StyleGroup, getValue, getSizeInPixel} from '../displays/styleTools';
+import {
+    getMaxZoom,
+    getPixelSize,
+    getLineWidth,
+    StyleGroup,
+    getValue,
+    getSizeInPixel,
+    getPolygonCenter
+} from '../displays/styleTools';
 import {Map} from '../Map';
 import {Feature} from '@here/xyz-maps-core';
 import {intersectBBox, intersectLineLine} from '../geometry';
@@ -133,7 +141,10 @@ class Hit {
         }
     }
 
-    private getOffsetLineData(feature: Feature, styleGrp: StyleGroup, zoomlevel: number): { offset: number, width: number }[] {
+    private getOffsetLineData(feature: Feature, styleGrp: StyleGroup, zoomlevel: number): {
+        offset: number,
+        width: number
+    }[] {
         let offsets = [];
         let offset0;
         for (let style of styleGrp) {
@@ -254,16 +265,35 @@ class Hit {
             }
         } else if (geoType == 'Polygon') {
             let hasLineStyle = false;
+            let pointStyle;
             const hasPolygonStyle = featureStyle.find((style) => {
                 const type = getValue('type', style, feature, zoomlevel);
-                hasLineStyle = hasLineStyle || type == 'Line';
-                return type == 'Polygon';
+                const isLineStyle = type == 'Line';
+                const isPolygonStyle = type == 'Polygon';
+                hasLineStyle ||= isLineStyle;
+                pointStyle ||= !(isLineStyle && isPolygonStyle) && style;
+                return isPolygonStyle;
             });
 
             if (!hasPolygonStyle) {
                 // do hit calculation on line geometry if there's a line-style but no polygon-style
-                return hasLineStyle && this.geometry(
-                    halfWidth, halfHeight, coordinates, 'MultiLineString', featureStyle, layerIndex, feature, zoomlevel, null, skip3d
+                if (hasLineStyle) {
+                    const lineHit = this.geometry(
+                        halfWidth, halfHeight, coordinates, 'MultiLineString', featureStyle, layerIndex, feature, zoomlevel, null, skip3d
+                    );
+                    if (lineHit) return lineHit;
+                }
+                return pointStyle && this.geometry(
+                    halfWidth,
+                    halfHeight,
+                    getPolygonCenter(pointStyle, feature, zoomlevel),
+                    'Point',
+                    featureStyle,
+                    layerIndex,
+                    feature,
+                    zoomlevel,
+                    null,
+                    skip3d
                 );
             }
 

diff --git a/packages/tests/specs/display/listener/pointer_down_up_listener_spec.json b/packages/tests/specs/display/listener/pointer_down_up_listener_spec.json
@@ -105,6 +105,7 @@
             }
           },
           {
+            "id": "Polygon",
             "type": "Feature",
             "geometry": {
               "type": "Polygon",

diff --git a/packages/tests/specs/display/listener/pointer_down_up_listener_spec.ts b/packages/tests/specs/display/listener/pointer_down_up_listener_spec.ts
@@ -30,6 +30,7 @@ describe('pointer down and pointer up listener', () => {
     let display;
     let mapContainer;
 
+
     before(async () => {
         preparedData = await prepare(dataset);
         display = new Map(document.getElementById('map'), {
@@ -201,6 +202,35 @@ describe('pointer down and pointer up listener', () => {
             type: 'LineString'
         });
     });
+
+    it('validate pointer event target on polygon visualized as point', async () => {
+        let testLayer = preparedData.getLayers('testLayer');
+        let testPolygon = preparedData.getFeature('testLayer', 'Polygon');
+        testLayer.setStyleGroup(testPolygon, [{zIndex: 100, type: 'Circle', radius: 32, fill: 'blue'}]);
+
+        await waitForViewportReady(display, () => {
+            display.setCenter(-74.0067173729875, 40.70065214195145);
+            display.setZoomlevel(16);
+        });
+
+        let listener = new Listener(display, ['pointerup']);
+
+        await click(mapContainer, 430, 300);
+
+        let results = listener.stop();
+
+        expect(results.pointerup).to.have.lengthOf(1);
+        expect(results.pointerup[0]).to.deep.include({
+            button: 0,
+            mapX: 430,
+            mapY: 300,
+            type: 'pointerup'
+        });
+        const geometry = (<any>results.pointerup[0]).target.geometry;
+        expect(geometry).to.deep.include({
+            type: 'Polygon'
+        });
+    });
 });