8497044953

Committed 31 Mar 2024 08:52AM UTC coverage: 89.989% (+0.002%) from 89.987%

Build # 8497044953

Build Type

Pull #8730

github

Committed by

web-flow

Commit Message

Merge bdc99e4ba into 1536dea30

Pull Request Pull Request #8730: Fix picking bugs

Run Details

6290 of 6928 branches covered (90.79%)

Branch coverage included in aggregate %.

11 of 11 new or added lines in 2 files covered. (100.0%)

3 existing lines in 1 file now uncovered.

51562 of 57360 relevant lines covered (89.89%)

6709.43 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.8

/modules/core/src/lib/deck-picker.ts

// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import type {Device} from '@luma.gl/core';
import PickLayersPass, {PickingColorDecoder} from '../passes/pick-layers-pass';
import {getClosestObject, getUniqueObjects, PickedPixel} from './picking/query-object';
import {
  processPickInfo,
  getLayerPickingInfo,
  getEmptyPickingInfo,
  PickingInfo
} from './picking/pick-info';

import type {Framebuffer} from '@luma.gl/core';
import type {FilterContext, Rect} from '../passes/layers-pass';
import type Layer from './layer';
import type {Effect} from './effect';
import type View from '../views/view';
import type Viewport from '../viewports/viewport';

export type PickByPointOptions = {
  x: number;
  y: number;
  radius?: number;
  depth?: number;
  mode?: string;
  unproject3D?: boolean;
};

export type PickByRectOptions = {
  x: number;
  y: number;
  width?: number;
  height?: number;
  mode?: string;
  maxObjects?: number | null;
};

type PickOperationContext = {
  layers: Layer[];
  views: Record<string, View>;
  viewports: Viewport[];
  onViewportActive: (viewport: Viewport) => void;
  effects: Effect[];
};

/** Manages picking in a Deck context */
export default class DeckPicker {
  device: Device;
  pickingFBO?: Framebuffer;
  depthFBO?: Framebuffer;
  pickLayersPass: PickLayersPass;
  layerFilter?: (context: FilterContext) => boolean;

  /** Identifiers of the previously picked object, for callback tracking and auto highlight */
  lastPickedInfo: {
    index: number;
    layerId: string | null;
    info: PickingInfo | null;
  };

  _pickable: boolean = true;

  constructor(device: Device) {
    this.device = device;
    this.pickLayersPass = new PickLayersPass(device);
    this.lastPickedInfo = {
      index: -1,
      layerId: null,
      info: null
    };
  }

  setProps(props: any): void {
    if ('layerFilter' in props) {
      this.layerFilter = props.layerFilter;
    }

    if ('_pickable' in props) {
      this._pickable = props._pickable;
    }
  }

  finalize() {
    if (this.pickingFBO) {
      this.pickingFBO.delete();
    }
    if (this.depthFBO) {
      this.depthFBO.colorAttachments[0].delete();
      this.depthFBO.delete();
    }
  }

  /** Pick the closest info at given coordinate */
  pickObject(opts: PickByPointOptions & PickOperationContext) {
    return this._pickClosestObject(opts);
  }

  /** Get all unique infos within a bounding box */
  pickObjects(opts: PickByRectOptions & PickOperationContext) {
    return this._pickVisibleObjects(opts);
  }

  // Returns a new picking info object by assuming the last picked object is still picked
  getLastPickedObject({x, y, layers, viewports}, lastPickedInfo = this.lastPickedInfo.info) {
    const lastPickedLayerId = lastPickedInfo && lastPickedInfo.layer && lastPickedInfo.layer.id;
    const lastPickedViewportId =
      lastPickedInfo && lastPickedInfo.viewport && lastPickedInfo.viewport.id;
    const layer = lastPickedLayerId ? layers.find(l => l.id === lastPickedLayerId) : null;
    const viewport =
      (lastPickedViewportId && viewports.find(v => v.id === lastPickedViewportId)) || viewports[0];
    const coordinate = viewport && viewport.unproject([x - viewport.x, y - viewport.y]);

    const info = {
      x,
      y,
      viewport,
      coordinate,
      layer
    };

    return {...lastPickedInfo, ...info};
  }

  // Private

  /** Ensures that picking framebuffer exists and matches the canvas size */
  _resizeBuffer() {
    // Create a frame buffer if not already available
    if (!this.pickingFBO) {
      this.pickingFBO = this.device.createFramebuffer({
        colorAttachments: ['rgba8unorm'],
        depthStencilAttachment: 'depth16unorm'
      });

      if (this.device.isTextureFormatRenderable('rgba32float')) {
        const depthFBO = this.device.createFramebuffer({
          colorAttachments: ['rgba32float'],
          depthStencilAttachment: 'depth16unorm'
        });
        this.depthFBO = depthFBO;
      }
    }

    // Resize it to current canvas size (this is a noop if size hasn't changed)
    // @ts-expect-error
    const gl = this.device.gl as WebGL2RenderingContext;
    this.pickingFBO?.resize({width: gl.canvas.width, height: gl.canvas.height});
    this.depthFBO?.resize({width: gl.canvas.width, height: gl.canvas.height});
  }

  /** Preliminary filtering of the layers list. Skid picking pass if no layer is pickable. */
  _getPickable(layers: Layer[]): Layer[] | null {
    if (this._pickable === false) {
      return null;
    }
    const pickableLayers = layers.filter(
      layer => this.pickLayersPass.shouldDrawLayer(layer) && !layer.isComposite
    );
    return pickableLayers.length ? pickableLayers : null;
  }

  /** Pick the closest object at the given coordinate */
  // eslint-disable-next-line max-statements,complexity
  _pickClosestObject({
    layers,
    views,
    viewports,
    x,
    y,
    radius = 0,
    depth = 1,
    mode = 'query',
    unproject3D,
    onViewportActive,
    effects
  }: PickByPointOptions & PickOperationContext): {
    result: PickingInfo[];
    emptyInfo: PickingInfo;
  } {
    // @ts-expect-error TODO - assuming WebGL context
    const pixelRatio = this.device.canvasContext.cssToDeviceRatio();

    const pickableLayers = this._getPickable(layers);

    if (!pickableLayers || viewports.length === 0) {
      return {
        result: [],
        emptyInfo: getEmptyPickingInfo({viewports, x, y, pixelRatio})
      };
    }

    this._resizeBuffer();

    // Convert from canvas top-left to WebGL bottom-left coordinates
    // Top-left coordinates [x, y] to bottom-left coordinates [deviceX, deviceY]
    // And compensate for pixelRatio
    // @ts-expect-error TODO - assuming WebGL context
    const devicePixelRange = this.device.canvasContext.cssToDevicePixels([x, y], true);
    const devicePixel = [
      devicePixelRange.x + Math.floor(devicePixelRange.width / 2),
      devicePixelRange.y + Math.floor(devicePixelRange.height / 2)
    ];

    const deviceRadius = Math.round(radius * pixelRatio);
    const {width, height} = this.pickingFBO as Framebuffer;
    const deviceRect = this._getPickingRect({
      deviceX: devicePixel[0],
      deviceY: devicePixel[1],
      deviceRadius,
      deviceWidth: width,
      deviceHeight: height
    });

    const cullRect: Rect = {
      x: x - radius,
      y: y - radius,
      width: radius * 2 + 1,
      height: radius * 2 + 1
    };

    let infos: Map<string | null, PickingInfo>;
    const result: PickingInfo[] = [];
    const affectedLayers = new Set<Layer>();

    for (let i = 0; i < depth; i++) {
      let pickInfo: PickedPixel;

      if (deviceRect) {
        const pickedResult = this._drawAndSample({
          layers: pickableLayers,
          views,
          viewports,
          onViewportActive,
          deviceRect,
          cullRect,
          effects,
          pass: `picking:${mode}`
        });

        pickInfo = getClosestObject({
          ...pickedResult,
          deviceX: devicePixel[0],
          deviceY: devicePixel[1],
          deviceRadius,
          deviceRect
        });
      } else {
        pickInfo = {
          pickedColor: null,
          pickedObjectIndex: -1
        };
      }

      let z;
      if (pickInfo.pickedLayer && unproject3D && this.depthFBO) {
        const {pickedColors: pickedColors2} = this._drawAndSample(
          {
            layers: [pickInfo.pickedLayer],
            views,
            viewports,
            onViewportActive,
            deviceRect: {
              x: pickInfo.pickedX as number,
              y: pickInfo.pickedY as number,
              width: 1,
              height: 1
            },
            cullRect,
            effects,
            pass: `picking:${mode}:z`
          },
          true
        );
        // picked value is in common space (pixels) from the camera target (viewport.position)
        // convert it to meters from the ground
        if (pickedColors2[3]) {
          z = pickedColors2[0];
        }
      }

      // Only exclude if we need to run picking again.
      // We need to run picking again if an object is detected AND
      // we have not exhausted the requested depth.
      if (pickInfo.pickedLayer && i + 1 < depth) {
        affectedLayers.add(pickInfo.pickedLayer);
        pickInfo.pickedLayer.disablePickingIndex(pickInfo.pickedObjectIndex);
      }

      // This logic needs to run even if no object is picked.
      infos = processPickInfo({
        pickInfo,
        lastPickedInfo: this.lastPickedInfo,
        mode,
        layers: pickableLayers,
        viewports,
        x,
        y,
        z,
        pixelRatio
      });

      for (const info of infos.values()) {
        if (info.layer) {
          result.push(info);
        }
      }

      // If no object is picked stop.
      if (!pickInfo.pickedColor) {
        break;
      }
    }

    // reset only affected buffers
    for (const layer of affectedLayers) {
      layer.restorePickingColors();
    }

    return {result, emptyInfo: infos!.get(null) as PickingInfo};
  }

  /** Pick all objects within the given bounding box */
  _pickVisibleObjects({
    layers,
    views,
    viewports,
    x,
    y,
    width = 1,
    height = 1,
    mode = 'query',
    maxObjects = null,
    onViewportActive,
    effects
  }: PickByRectOptions & PickOperationContext): PickingInfo[] {
    const pickableLayers = this._getPickable(layers);

    if (!pickableLayers || viewports.length === 0) {
      return [];
    }

    this._resizeBuffer();

    // Convert from canvas top-left to WebGL bottom-left coordinates
    // And compensate for pixelRatio
    // @ts-expect-error TODO - assuming WebGL context
    const pixelRatio = this.device.canvasContext.cssToDeviceRatio();
    // @ts-expect-error TODO - assuming WebGL context
    const leftTop = this.device.canvasContext.cssToDevicePixels([x, y], true);

    // take left and top (y inverted in device pixels) from start location
    const deviceLeft = leftTop.x;
    const deviceTop = leftTop.y + leftTop.height;

    // take right and bottom (y inverted in device pixels) from end location
    // @ts-expect-error TODO - assuming WebGL context
    const rightBottom = this.device.canvasContext.cssToDevicePixels([x + width, y + height], true);
    const deviceRight = rightBottom.x + rightBottom.width;
    const deviceBottom = rightBottom.y;

    const deviceRect = {
      x: deviceLeft,
      y: deviceBottom,
      // deviceTop and deviceRight represent the first pixel outside the desired rect
      width: deviceRight - deviceLeft,
      height: deviceTop - deviceBottom
    };

    const pickedResult = this._drawAndSample({
      layers: pickableLayers,
      views,
      viewports,
      onViewportActive,
      deviceRect,
      cullRect: {x, y, width, height},
      effects,
      pass: `picking:${mode}`
    });

    const pickInfos = getUniqueObjects(pickedResult);

    // `getUniqueObjects` dedup by picked color
    // However different picked color may be linked to the same picked object, e.g. stroke and fill of the same polygon
    // picked from different sub layers of a GeoJsonLayer
    // Here after resolving the picked index with `layer.getPickingInfo`, we need to dedup again by unique picked objects
    const uniquePickedObjects = new Map<string, Set<unknown>>();
    const uniqueInfos: PickingInfo[] = [];

    const limitMaxObjects = Number.isFinite(maxObjects);

    for (let i = 0; i < pickInfos.length; i++) {
      if (limitMaxObjects && uniqueInfos.length >= maxObjects!) {
        break;
      }
      const pickInfo = pickInfos[i];
      let info: PickingInfo = {
        color: pickInfo.pickedColor,
        layer: null,
        index: pickInfo.pickedObjectIndex,
        picked: true,
        x,
        y,
        pixelRatio
      };

      info = getLayerPickingInfo({layer: pickInfo.pickedLayer as Layer, info, mode});
      // info.layer is always populated because it's a picked pixel
      const pickedLayerId = info.layer!.id;
      if (!uniquePickedObjects.has(pickedLayerId)) {
        uniquePickedObjects.set(pickedLayerId, new Set<unknown>());
      }
      const uniqueObjectsInLayer = uniquePickedObjects.get(pickedLayerId) as Set<unknown>;
      // info.object may be null if the layer is using non-iterable data.
      // Fall back to using index as identifier.
      const pickedObjectKey = info.object ?? info.index;
      if (!uniqueObjectsInLayer.has(pickedObjectKey)) {
        uniqueObjectsInLayer.add(pickedObjectKey);
        uniqueInfos.push(info);
      }
    }

    return uniqueInfos;
  }

  /** Renders layers into the picking buffer with picking colors and read the pixels. */
  _drawAndSample(params: {
    deviceRect: Rect;
    pass: string;
    layers: Layer[];
    views: Record<string, View>;
    viewports: Viewport[];
    onViewportActive: (viewport: Viewport) => void;
    cullRect?: Rect;
    effects: Effect[];
  }): {
    pickedColors: Uint8Array;
    decodePickingColor: PickingColorDecoder;
  };

  /** Renders layers into the picking buffer with encoded z values and read the pixels. */
  _drawAndSample(
    params: {
      deviceRect: Rect;
      pass: string;
      layers: Layer[];
      views: Record<string, View>;
      viewports: Viewport[];
      onViewportActive: (viewport: Viewport) => void;
      cullRect?: Rect;
      effects: Effect[];
    },
    pickZ: true
  ): {
    pickedColors: Float32Array;
    decodePickingColor: null;
  };

  _drawAndSample(
    {
      layers,
      views,
      viewports,
      onViewportActive,
      deviceRect,
      cullRect,
      effects,
      pass
    }: {
      deviceRect: Rect;
      pass: string;
      layers: Layer[];
      views: Record<string, View>;
      viewports: Viewport[];
      onViewportActive: (viewport: Viewport) => void;
      cullRect?: Rect;
      effects: Effect[];
    },
    pickZ: boolean = false
  ): {
    pickedColors: Uint8Array | Float32Array;
    decodePickingColor: PickingColorDecoder | null;
  } {
    const pickingFBO = pickZ ? this.depthFBO : this.pickingFBO;
    const opts = {
      layers,
      layerFilter: this.layerFilter,
      views,
      viewports,
      onViewportActive,
      pickingFBO,
      deviceRect,
      cullRect,
      effects,
      pass,
      pickZ,
      preRenderStats: {}
    };

    for (const effect of effects) {
      if (effect.useInPicking) {
        opts.preRenderStats[effect.id] = effect.preRender(opts);
      }
    }

    const {decodePickingColor} = this.pickLayersPass.render(opts);

    // Read from an already rendered picking buffer
    // Returns an Uint8ClampedArray of picked pixels
    const {x, y, width, height} = deviceRect;
    const pickedColors = new (pickZ ? Float32Array : Uint8Array)(width * height * 4);
    this.device.readPixelsToArrayWebGL(pickingFBO as Framebuffer, {
      sourceX: x,
      sourceY: y,
      sourceWidth: width,
      sourceHeight: height,
      target: pickedColors
    });

    return {pickedColors, decodePickingColor};
  }

  // Calculate a picking rect centered on deviceX and deviceY and clipped to device
  // Returns null if pixel is outside of device
  _getPickingRect({
    deviceX,
    deviceY,
    deviceRadius,
    deviceWidth,
    deviceHeight
  }: {
    deviceX: number;
    deviceY: number;
    deviceRadius: number;
    deviceWidth: number;
    deviceHeight: number;
  }): Rect | null {
    // Create a box of size `radius * 2 + 1` centered at [deviceX, deviceY]
    const x = Math.max(0, deviceX - deviceRadius);
    const y = Math.max(0, deviceY - deviceRadius);
    const width = Math.min(deviceWidth, deviceX + deviceRadius + 1) - x;
    const height = Math.min(deviceHeight, deviceY + deviceRadius + 1) - y;

    // x, y out of bounds.
    if (width <= 0 || height <= 0) {
      return null;
    }

    return {x, y, width, height};
  }
}

1	// Copyright (c) 2015 - 2017 Uber Technologies, Inc.	1✔
2	//	1✔
3	// Permission is hereby granted, free of charge, to any person obtaining a copy	1✔
4	// of this software and associated documentation files (the "Software"), to deal	1✔
5	// in the Software without restriction, including without limitation the rights	1✔
6	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell	1✔
7	// copies of the Software, and to permit persons to whom the Software is	1✔
8	// furnished to do so, subject to the following conditions:	1✔
9	//	1✔
10	// The above copyright notice and this permission notice shall be included in	1✔
11	// all copies or substantial portions of the Software.	1✔
12	//	1✔
13	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR	1✔
14	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,	1✔
15	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE	1✔
16	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER	1✔
17	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,	1✔
18	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN	1✔
19	// THE SOFTWARE.	1✔
20		1✔
21	import type {Device} from '@luma.gl/core';	1✔
22	import PickLayersPass, {PickingColorDecoder} from '../passes/pick-layers-pass';	1✔
23	import {getClosestObject, getUniqueObjects, PickedPixel} from './picking/query-object';	1✔
24	import {	1✔
25	processPickInfo,	1✔
26	getLayerPickingInfo,	1✔
27	getEmptyPickingInfo,	1✔
28	PickingInfo	1✔
29	} from './picking/pick-info';	1✔
30		1✔
31	import type {Framebuffer} from '@luma.gl/core';	1✔
32	import type {FilterContext, Rect} from '../passes/layers-pass';	1✔
33	import type Layer from './layer';	1✔
34	import type {Effect} from './effect';	1✔
35	import type View from '../views/view';	1✔
36	import type Viewport from '../viewports/viewport';	1✔
37		1✔
38	export type PickByPointOptions = {	1✔
39	x: number;	1✔
40	y: number;	1✔
41	radius?: number;	1✔
42	depth?: number;	1✔
43	mode?: string;	1✔
44	unproject3D?: boolean;	1✔
45	};	1✔
46		1✔
47	export type PickByRectOptions = {	1✔
48	x: number;	1✔
49	y: number;	1✔
50	width?: number;	1✔
51	height?: number;	1✔
52	mode?: string;	1✔
53	maxObjects?: number \| null;	1✔
54	};	1✔
55		1✔
56	type PickOperationContext = {	1✔
57	layers: Layer[];	1✔
58	views: Record<string, View>;	1✔
59	viewports: Viewport[];	1✔
60	onViewportActive: (viewport: Viewport) => void;	1✔
61	effects: Effect[];	1✔
62	};	1✔
63		1✔
64	/** Manages picking in a Deck context */	1✔
65	export default class DeckPicker {	1✔
66	device: Device;	1✔
67	pickingFBO?: Framebuffer;	1✔
68	depthFBO?: Framebuffer;	1✔
69	pickLayersPass: PickLayersPass;	1✔
70	layerFilter?: (context: FilterContext) => boolean;	1✔
71		1✔
72	/** Identifiers of the previously picked object, for callback tracking and auto highlight */	1✔
73	lastPickedInfo: {	1✔
74	index: number;	1✔
75	layerId: string \| null;	1✔
76	info: PickingInfo \| null;	1✔
77	};	1✔
78		1✔
79	_pickable: boolean = true;	1✔
80		1✔
81	constructor(device: Device) {	1✔
82	this.device = device;	30✔
83	this.pickLayersPass = new PickLayersPass(device);	30✔
84	this.lastPickedInfo = {	30✔
85	index: -1,	30✔
86	layerId: null,	30✔
87	info: null	30✔
88	};	30✔
89	}	30✔
90		1✔
91	setProps(props: any): void {	1✔
92	if ('layerFilter' in props) {	172✔
93	this.layerFilter = props.layerFilter;	170✔
94	}	170✔
95		172✔
96	if ('_pickable' in props) {	172✔
97	this._pickable = props._pickable;	172✔
98	}	172✔
99	}	172✔
100		1✔
101	finalize() {	1✔
102	if (this.pickingFBO) {	27✔
103	this.pickingFBO.delete();	4✔
104	}	4✔
105	if (this.depthFBO) {	27✔
106	this.depthFBO.colorAttachments[0].delete();	4✔
107	this.depthFBO.delete();	4✔
108	}	4✔
109	}	27✔
110		1✔
111	/** Pick the closest info at given coordinate */	1✔
112	pickObject(opts: PickByPointOptions & PickOperationContext) {	1✔
113	return this._pickClosestObject(opts);	53✔
114	}	53✔
115		1✔
116	/** Get all unique infos within a bounding box */	1✔
117	pickObjects(opts: PickByRectOptions & PickOperationContext) {	1✔
118	return this._pickVisibleObjects(opts);	17✔
119	}	17✔
120		1✔
121	// Returns a new picking info object by assuming the last picked object is still picked	1✔
122	getLastPickedObject({x, y, layers, viewports}, lastPickedInfo = this.lastPickedInfo.info) {	1✔
123	const lastPickedLayerId = lastPickedInfo && lastPickedInfo.layer && lastPickedInfo.layer.id;	9✔
124	const lastPickedViewportId =	9✔
125	lastPickedInfo && lastPickedInfo.viewport && lastPickedInfo.viewport.id;	9✔
126	const layer = lastPickedLayerId ? layers.find(l => l.id === lastPickedLayerId) : null;	9✔
127	const viewport =	9✔
128	(lastPickedViewportId && viewports.find(v => v.id === lastPickedViewportId)) \|\| viewports[0];	9!
129	const coordinate = viewport && viewport.unproject([x - viewport.x, y - viewport.y]);	9✔
130		9✔
131	const info = {	9✔
132	x,	9✔
133	y,	9✔
134	viewport,	9✔
135	coordinate,	9✔
136	layer	9✔
137	};	9✔
138		9✔
139	return {...lastPickedInfo, ...info};	9✔
140	}	9✔
141		1✔
142	// Private	1✔
143		1✔
144	/** Ensures that picking framebuffer exists and matches the canvas size */	1✔
145	_resizeBuffer() {	1✔
146	// Create a frame buffer if not already available	55✔
147	if (!this.pickingFBO) {	55✔
148	this.pickingFBO = this.device.createFramebuffer({	4✔
149	colorAttachments: ['rgba8unorm'],	4✔
150	depthStencilAttachment: 'depth16unorm'	4✔
151	});	4✔
152		4✔
153	if (this.device.isTextureFormatRenderable('rgba32float')) {	4✔
154	const depthFBO = this.device.createFramebuffer({	4✔
155	colorAttachments: ['rgba32float'],	4✔
156	depthStencilAttachment: 'depth16unorm'	4✔
157	});	4✔
158	this.depthFBO = depthFBO;	4✔
159	}	4✔
160	}	4✔
161		55✔
162	// Resize it to current canvas size (this is a noop if size hasn't changed)	55✔
163	// @ts-expect-error	55✔
164	const gl = this.device.gl as WebGL2RenderingContext;	55✔
165	this.pickingFBO?.resize({width: gl.canvas.width, height: gl.canvas.height});	55✔
166	this.depthFBO?.resize({width: gl.canvas.width, height: gl.canvas.height});	55✔
167	}	55✔
168		1✔
169	/** Preliminary filtering of the layers list. Skid picking pass if no layer is pickable. */	1✔
170	_getPickable(layers: Layer[]): Layer[] \| null {	1✔
171	if (this._pickable === false) {	70✔
172	return null;	1✔
173	}	1✔
174	const pickableLayers = layers.filter(	69✔
175	layer => this.pickLayersPass.shouldDrawLayer(layer) && !layer.isComposite	69✔
176	);	69✔
177	return pickableLayers.length ? pickableLayers : null;	70✔
178	}	70✔
179		1✔
180	/** Pick the closest object at the given coordinate */	1✔
181	// eslint-disable-next-line max-statements,complexity	1✔
182	_pickClosestObject({	1✔
183	layers,	53✔
184	views,	53✔
185	viewports,	53✔
186	x,	53✔
187	y,	53✔
188	radius = 0,	53✔
189	depth = 1,	53✔
190	mode = 'query',	53✔
191	unproject3D,	53✔
192	onViewportActive,	53✔
193	effects	53✔
194	}: PickByPointOptions & PickOperationContext): {	53✔
195	result: PickingInfo[];	53✔
196	emptyInfo: PickingInfo;	53✔
197	} {	53✔
198	// @ts-expect-error TODO - assuming WebGL context	53✔
199	const pixelRatio = this.device.canvasContext.cssToDeviceRatio();	53✔
200		53✔
201	const pickableLayers = this._getPickable(layers);	53✔
202		53✔
203	if (!pickableLayers \|\| viewports.length === 0) {	53✔
204	return {	14✔
205	result: [],	14✔
206	emptyInfo: getEmptyPickingInfo({viewports, x, y, pixelRatio})	14✔
207	};	14✔
208	}	14✔
209		39✔
210	this._resizeBuffer();	39✔
211		39✔
212	// Convert from canvas top-left to WebGL bottom-left coordinates	39✔
213	// Top-left coordinates [x, y] to bottom-left coordinates [deviceX, deviceY]	39✔
214	// And compensate for pixelRatio	39✔
215	// @ts-expect-error TODO - assuming WebGL context	39✔
216	const devicePixelRange = this.device.canvasContext.cssToDevicePixels([x, y], true);	39✔
217	const devicePixel = [	39✔
218	devicePixelRange.x + Math.floor(devicePixelRange.width / 2),	39✔
219	devicePixelRange.y + Math.floor(devicePixelRange.height / 2)	39✔
220	];	39✔
221		39✔
222	const deviceRadius = Math.round(radius * pixelRatio);	39✔
223	const {width, height} = this.pickingFBO as Framebuffer;	39✔
224	const deviceRect = this._getPickingRect({	39✔
225	deviceX: devicePixel[0],	39✔
226	deviceY: devicePixel[1],	39✔
227	deviceRadius,	39✔
228	deviceWidth: width,	39✔
229	deviceHeight: height	39✔
230	});	39✔
231		39✔
232	const cullRect: Rect = {	39✔
233	x: x - radius,	39✔
234	y: y - radius,	39✔
235	width: radius * 2 + 1,	39✔
236	height: radius * 2 + 1	39✔
237	};	39✔
238		39✔
239	let infos: Map<string \| null, PickingInfo>;	39✔
240	const result: PickingInfo[] = [];	39✔
241	const affectedLayers = new Set<Layer>();	39✔
242		39✔
243	for (let i = 0; i < depth; i++) {	53✔
244	let pickInfo: PickedPixel;	59✔
245		59✔
246	if (deviceRect) {	59✔
247	const pickedResult = this._drawAndSample({	59✔
248	layers: pickableLayers,	59✔
249	views,	59✔
250	viewports,	59✔
251	onViewportActive,	59✔
252	deviceRect,	59✔
253	cullRect,	59✔
254	effects,	59✔
255	pass: `picking:${mode}`	59✔
256	});	59✔
257		59✔
258	pickInfo = getClosestObject({	59✔
259	...pickedResult,	59✔
260	deviceX: devicePixel[0],	59✔
261	deviceY: devicePixel[1],	59✔
262	deviceRadius,	59✔
263	deviceRect	59✔
264	});	59✔
265	} else {	59!
266	pickInfo = {	×
267	pickedColor: null,	×
268	pickedObjectIndex: -1	×
269	};	×
UNCOV 270	}	×
271		59✔
272	let z;	59✔
273	if (pickInfo.pickedLayer && unproject3D && this.depthFBO) {	59!
274	const {pickedColors: pickedColors2} = this._drawAndSample(	×
275	{	×
276	layers: [pickInfo.pickedLayer],	×
277	views,	×
278	viewports,	×
279	onViewportActive,	×
280	deviceRect: {	×
281	x: pickInfo.pickedX as number,	×
282	y: pickInfo.pickedY as number,	×
283	width: 1,	×
284	height: 1	×
285	},	×
286	cullRect,	×
287	effects,	×
288	pass: `picking:${mode}:z`	×
289	},	×
290	true	×
291	);	×
292	// picked value is in common space (pixels) from the camera target (viewport.position)	×
293	// convert it to meters from the ground	×
294	if (pickedColors2[3]) {	×
295	z = pickedColors2[0];	×
296	}	×
UNCOV 297	}	×
298		59✔
299	// Only exclude if we need to run picking again.	59✔
300	// We need to run picking again if an object is detected AND	59✔
301	// we have not exhausted the requested depth.	59✔
302	if (pickInfo.pickedLayer && i + 1 < depth) {	59✔
303	affectedLayers.add(pickInfo.pickedLayer);	20✔
304	pickInfo.pickedLayer.disablePickingIndex(pickInfo.pickedObjectIndex);	20✔
305	}	20✔
306		59✔
307	// This logic needs to run even if no object is picked.	59✔
308	infos = processPickInfo({	59✔
309	pickInfo,	59✔
310	lastPickedInfo: this.lastPickedInfo,	59✔
311	mode,	59✔
312	layers: pickableLayers,	59✔
313	viewports,	59✔
314	x,	59✔
315	y,	59✔
316	z,	59✔
317	pixelRatio	59✔
318	});	59✔
319		59✔
320	for (const info of infos.values()) {	59✔
321	if (info.layer) {	92✔
322	result.push(info);	33✔
323	}	33✔
324	}	92✔
325		59✔
326	// If no object is picked stop.	59✔
327	if (!pickInfo.pickedColor) {	59✔
328	break;	26✔
329	}	26✔
330	}	59✔
331		39✔
332	// reset only affected buffers	39✔
333	for (const layer of affectedLayers) {	53✔
334	layer.restorePickingColors();	11✔
335	}	11✔
336		39✔
337	return {result, emptyInfo: infos!.get(null) as PickingInfo};	39✔
338	}	53✔
339		1✔
340	/** Pick all objects within the given bounding box */	1✔
341	_pickVisibleObjects({	1✔
342	layers,	17✔
343	views,	17✔
344	viewports,	17✔
345	x,	17✔
346	y,	17✔
347	width = 1,	17✔
348	height = 1,	17✔
349	mode = 'query',	17✔
350	maxObjects = null,	17✔
351	onViewportActive,	17✔
352	effects	17✔
353	}: PickByRectOptions & PickOperationContext): PickingInfo[] {	17✔
354	const pickableLayers = this._getPickable(layers);	17✔
355		17✔
356	if (!pickableLayers \|\| viewports.length === 0) {	17✔
357	return [];	1✔
358	}	1✔
359		16✔
360	this._resizeBuffer();	16✔
361		16✔
362	// Convert from canvas top-left to WebGL bottom-left coordinates	16✔
363	// And compensate for pixelRatio	16✔
364	// @ts-expect-error TODO - assuming WebGL context	16✔
365	const pixelRatio = this.device.canvasContext.cssToDeviceRatio();	16✔
366	// @ts-expect-error TODO - assuming WebGL context	16✔
367	const leftTop = this.device.canvasContext.cssToDevicePixels([x, y], true);	16✔
368		16✔
369	// take left and top (y inverted in device pixels) from start location	16✔
370	const deviceLeft = leftTop.x;	16✔
371	const deviceTop = leftTop.y + leftTop.height;	16✔
372		16✔
373	// take right and bottom (y inverted in device pixels) from end location	16✔
374	// @ts-expect-error TODO - assuming WebGL context	16✔
375	const rightBottom = this.device.canvasContext.cssToDevicePixels([x + width, y + height], true);	16✔
376	const deviceRight = rightBottom.x + rightBottom.width;	16✔
377	const deviceBottom = rightBottom.y;	16✔
378		16✔
379	const deviceRect = {	16✔
380	x: deviceLeft,	16✔
381	y: deviceBottom,	16✔
382	// deviceTop and deviceRight represent the first pixel outside the desired rect	16✔
383	width: deviceRight - deviceLeft,	16✔
384	height: deviceTop - deviceBottom	16✔
385	};	16✔
386		16✔
387	const pickedResult = this._drawAndSample({	16✔
388	layers: pickableLayers,	16✔
389	views,	16✔
390	viewports,	16✔
391	onViewportActive,	16✔
392	deviceRect,	16✔
393	cullRect: {x, y, width, height},	16✔
394	effects,	16✔
395	pass: `picking:${mode}`	16✔
396	});	16✔
397		16✔
398	const pickInfos = getUniqueObjects(pickedResult);	16✔
399		16✔
400	// `getUniqueObjects` dedup by picked color	16✔
401	// However different picked color may be linked to the same picked object, e.g. stroke and fill of the same polygon	16✔
402	// picked from different sub layers of a GeoJsonLayer	16✔
403	// Here after resolving the picked index with `layer.getPickingInfo`, we need to dedup again by unique picked objects	16✔
404	const uniquePickedObjects = new Map<string, Set<unknown>>();	16✔
405	const uniqueInfos: PickingInfo[] = [];	16✔
406		16✔
407	const limitMaxObjects = Number.isFinite(maxObjects);	16✔
408		16✔
409	for (let i = 0; i < pickInfos.length; i++) {	17✔
410	if (limitMaxObjects && uniqueInfos.length >= maxObjects!) {	162!
411	break;	×
UNCOV 412	}	×
413	const pickInfo = pickInfos[i];	162✔
414	let info: PickingInfo = {	162✔
415	color: pickInfo.pickedColor,	162✔
416	layer: null,	162✔
417	index: pickInfo.pickedObjectIndex,	162✔
418	picked: true,	162✔
419	x,	162✔
420	y,	162✔
421	pixelRatio	162✔
422	};	162✔
423		162✔
424	info = getLayerPickingInfo({layer: pickInfo.pickedLayer as Layer, info, mode});	162✔
425	// info.layer is always populated because it's a picked pixel	162✔
426	const pickedLayerId = info.layer!.id;	162✔
427	if (!uniquePickedObjects.has(pickedLayerId)) {	162✔
428	uniquePickedObjects.set(pickedLayerId, new Set<unknown>());	11✔
429	}	11✔
430	const uniqueObjectsInLayer = uniquePickedObjects.get(pickedLayerId) as Set<unknown>;	162✔
431	// info.object may be null if the layer is using non-iterable data.	162✔
432	// Fall back to using index as identifier.	162✔
433	const pickedObjectKey = info.object ?? info.index;	162✔
434	if (!uniqueObjectsInLayer.has(pickedObjectKey)) {	162✔
435	uniqueObjectsInLayer.add(pickedObjectKey);	134✔
436	uniqueInfos.push(info);	134✔
437	}	134✔
438	}	162✔
439		16✔
440	return uniqueInfos;	16✔
441	}	17✔
442		1✔
443	/** Renders layers into the picking buffer with picking colors and read the pixels. */	1✔
444	_drawAndSample(params: {	1✔
445	deviceRect: Rect;	1✔
446	pass: string;	1✔
447	layers: Layer[];	1✔
448	views: Record<string, View>;	1✔
449	viewports: Viewport[];	1✔
450	onViewportActive: (viewport: Viewport) => void;	1✔
451	cullRect?: Rect;	1✔
452	effects: Effect[];	1✔
453	}): {	1✔
454	pickedColors: Uint8Array;	1✔
455	decodePickingColor: PickingColorDecoder;	1✔
456	};	1✔
457		1✔
458	/** Renders layers into the picking buffer with encoded z values and read the pixels. */	1✔
459	_drawAndSample(	1✔
460	params: {	1✔
461	deviceRect: Rect;	1✔
462	pass: string;	1✔
463	layers: Layer[];	1✔
464	views: Record<string, View>;	1✔
465	viewports: Viewport[];	1✔
466	onViewportActive: (viewport: Viewport) => void;	1✔
467	cullRect?: Rect;	1✔
468	effects: Effect[];	1✔
469	},	1✔
470	pickZ: true	1✔
471	): {	1✔
472	pickedColors: Float32Array;	1✔
473	decodePickingColor: null;	1✔
474	};	1✔
475		1✔
476	_drawAndSample(	1✔
477	{	75✔
478	layers,	75✔
479	views,	75✔
480	viewports,	75✔
481	onViewportActive,	75✔
482	deviceRect,	75✔
483	cullRect,	75✔
484	effects,	75✔
485	pass	75✔
486	}: {	75✔
487	deviceRect: Rect;	75✔
488	pass: string;	75✔
489	layers: Layer[];	75✔
490	views: Record<string, View>;	75✔
491	viewports: Viewport[];	75✔
492	onViewportActive: (viewport: Viewport) => void;	75✔
493	cullRect?: Rect;	75✔
494	effects: Effect[];	75✔
495	},	75✔
496	pickZ: boolean = false	75✔
497	): {	75✔
498	pickedColors: Uint8Array \| Float32Array;	75✔
499	decodePickingColor: PickingColorDecoder \| null;	75✔
500	} {	75✔
501	const pickingFBO = pickZ ? this.depthFBO : this.pickingFBO;	75!
502	const opts = {	75✔
503	layers,	75✔
504	layerFilter: this.layerFilter,	75✔
505	views,	75✔
506	viewports,	75✔
507	onViewportActive,	75✔
508	pickingFBO,	75✔
509	deviceRect,	75✔
510	cullRect,	75✔
511	effects,	75✔
512	pass,	75✔
513	pickZ,	75✔
514	preRenderStats: {}	75✔
515	};	75✔
516		75✔
517	for (const effect of effects) {	75✔
518	if (effect.useInPicking) {	126✔
519	opts.preRenderStats[effect.id] = effect.preRender(opts);	52✔
520	}	52✔
521	}	126✔
522		75✔
523	const {decodePickingColor} = this.pickLayersPass.render(opts);	75✔
524		75✔
525	// Read from an already rendered picking buffer	75✔
526	// Returns an Uint8ClampedArray of picked pixels	75✔
527	const {x, y, width, height} = deviceRect;	75✔
528	const pickedColors = new (pickZ ? Float32Array : Uint8Array)(width * height * 4);	75!
529	this.device.readPixelsToArrayWebGL(pickingFBO as Framebuffer, {	75✔
530	sourceX: x,	75✔
531	sourceY: y,	75✔
532	sourceWidth: width,	75✔
533	sourceHeight: height,	75✔
534	target: pickedColors	75✔
535	});	75✔
536		75✔
537	return {pickedColors, decodePickingColor};	75✔
538	}	75✔
539		1✔
540	// Calculate a picking rect centered on deviceX and deviceY and clipped to device	1✔
541	// Returns null if pixel is outside of device	1✔
542	_getPickingRect({	1✔
543	deviceX,	44✔
544	deviceY,	44✔
545	deviceRadius,	44✔
546	deviceWidth,	44✔
547	deviceHeight	44✔
548	}: {	44✔
549	deviceX: number;	44✔
550	deviceY: number;	44✔
551	deviceRadius: number;	44✔
552	deviceWidth: number;	44✔
553	deviceHeight: number;	44✔
554	}): Rect \| null {	44✔
555	// Create a box of size `radius * 2 + 1` centered at [deviceX, deviceY]	44✔
556	const x = Math.max(0, deviceX - deviceRadius);	44✔
557	const y = Math.max(0, deviceY - deviceRadius);	44✔
558	const width = Math.min(deviceWidth, deviceX + deviceRadius + 1) - x;	44✔
559	const height = Math.min(deviceHeight, deviceY + deviceRadius + 1) - y;	44✔
560		44✔
561	// x, y out of bounds.	44✔
562	if (width <= 0 \|\| height <= 0) {	44✔
563	return null;	2✔
564	}	2✔
565		42✔
566	return {x, y, width, height};	42✔
567	}	44✔
568	}	1✔

visgl / deck.gl / 8497044953

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous