Merge remote-tracking branch 'rubenthoms/2dviewer-multi-readout' into…

… 2dviewer-multi-readout
rubenthoms · Nov 26, 2024 · 429feb5 · 429feb5
2 parents 5969c2c + cd7d47e
commit 429feb5
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 7 deletions.
diff --git a/frontend/src/lib/utils/ProximityGrouping.ts b/frontend/src/lib/utils/ProximityGrouping.ts
@@ -4,7 +4,8 @@ export interface Entity {
 
 export type EntityGroup<TEntity extends Entity> = Entity &
     TEntity & {
-        entities?: TEntity[];
+        entities: TEntity[];
+        radius: number;
     };
 
 export class ProximityGrouping<TEntity extends Entity> {
@@ -34,6 +35,7 @@ export class ProximityGrouping<TEntity extends Entity> {
                 group = {
                     ...entity,
                     coordinates: entity.coordinates,
+                    radius: 0,
                     entities: [],
                 };
 
@@ -45,6 +47,22 @@ export class ProximityGrouping<TEntity extends Entity> {
                     (group.coordinates[1] * (group.entities?.length ?? 1) + entity.coordinates[1]) /
                         ((group.entities?.length ?? 1) + 1),
                 ];
+                group.radius = Math.max(
+                    group.radius,
+                    Math.sqrt(
+                        group.entities.reduce(
+                            (acc, entity) =>
+                                Math.max(
+                                    acc,
+                                    Math.sqrt(
+                                        (entity.coordinates[0] - group!.coordinates[0]) ** 2 +
+                                            (entity.coordinates[1] - group!.coordinates[1]) ** 2
+                                    )
+                                ),
+                            0
+                        )
+                    )
+                );
             }
 
             group.entities?.push(entity);

diff --git a/frontend/src/modules/2DViewer/view/customDeckGlLayers/LabelLayer.ts b/frontend/src/modules/2DViewer/view/customDeckGlLayers/LabelLayer.ts
@@ -52,6 +52,7 @@ export class LabelLayer extends CompositeLayer<LabelLayerProps> {
     private _labelBoundingBoxes: (BoundingBox2D | null)[] = [];
     private _adjustedData: ExtendedLabelData[] = [];
     private _labelGroups: Map<number, EntityGroup<IntermediateLabelData>[]> = new Map();
+    private _singleLabelGroups: Map<number, EntityGroup<IntermediateLabelData>[]> = new Map();
 
     estimateLabelBoundingBoxes(): void {
         const viewport = this.context.viewport;
@@ -151,11 +152,16 @@ export class LabelLayer extends CompositeLayer<LabelLayerProps> {
         const grouping = new ProximityGrouping(labels);
 
         for (let i = 0; i < 5; i++) {
+            const result = grouping.groupEntities(100 / 2 ** zoomLevel);
+            const singleLabelGroups = result.filter((el) => el.entities.length === 1);
+            const multiLabelGroups = result.filter((el) => el.entities.length > 1);
             this._labelGroups.set(
                 zoomLevel,
-                grouping
-                    .groupEntities(100 / 2 ** zoomLevel)
-                    .map((el) => ({ ...el, name: el.entities?.length.toString() ?? el.name }))
+                multiLabelGroups.map((el) => ({ ...el, name: el.entities.length.toString() }))
+            );
+            this._singleLabelGroups.set(
+                zoomLevel,
+                singleLabelGroups.map((el) => ({ ...el, name: el.entities[0].name }))
             );
             zoomLevel -= 1;
         }
@@ -164,10 +170,10 @@ export class LabelLayer extends CompositeLayer<LabelLayerProps> {
 
     filterSubLayer(context: FilterContext): boolean {
         if (context.layer.id === `${this.props.id}-text`) {
-            return context.viewport.zoom > 1;
+            return context.viewport.zoom > 2;
         }
         if (context.layer.id === `${this.props.id}-lines`) {
-            return context.viewport.zoom > 1;
+            return context.viewport.zoom > 2;
         }
 
         const reg = /(text|points)-zoom-([-\d\\.]+)/;
@@ -179,7 +185,19 @@ export class LabelLayer extends CompositeLayer<LabelLayerProps> {
             const closestZoomLevel = zoomLevels.reduce((prev, curr) =>
                 Math.abs(curr - context.viewport.zoom) < Math.abs(prev - context.viewport.zoom) ? curr : prev
             );
-            return closestZoomLevel === zoom && context.viewport.zoom <= 1;
+            return closestZoomLevel === zoom && context.viewport.zoom <= 2;
+        }
+
+        const reg2 = /text-single-zoom-([-\d\\.]+)/;
+        const match2 = context.layer.id.match(reg2);
+
+        if (match2) {
+            const zoom = parseFloat(match2[1]);
+            const zoomLevels = Array.from(this._singleLabelGroups.keys());
+            const closestZoomLevel = zoomLevels.reduce((prev, curr) =>
+                Math.abs(curr - context.viewport.zoom) < Math.abs(prev - context.viewport.zoom) ? curr : prev
+            );
+            return closestZoomLevel === zoom && context.viewport.zoom <= 2 && context.viewport.zoom > -4;
         }
 
         return true;
@@ -238,6 +256,33 @@ export class LabelLayer extends CompositeLayer<LabelLayerProps> {
                 )
             );
         }
+        for (const [zoomLevel, labelGroups] of this._singleLabelGroups) {
+            zoomLayers.push(
+                new TextLayer(
+                    this.getSubLayerProps({
+                        id: `text-single-zoom-${zoomLevel}`,
+                        data: labelGroups,
+                        getPosition: (d: ExtendedLabelData) => d.coordinates,
+                        getText: (d: ExtendedLabelData) => `${d.name}`,
+                        getSize: 16,
+                        getColor: [255, 255, 255],
+                        getAngle: 0,
+                        getPixelOffset: [0, 0],
+                        fontWeight: 800,
+                        getTextAnchor: "middle",
+                        getAlignmentBaseline: "center",
+                        pickable: true,
+                        sizeScale: Math.abs(zoomLevel - 3) ** 2,
+                        sizeUnits: "meters",
+                        sizeMinPixels: sizeMinPixels,
+                        sizeMaxPixels: 16,
+                        fontSettings: {
+                            sdf: true,
+                        },
+                    })
+                )
+            );
+        }
 
         return [
             new PointsLayer(