[Bug] EditableGeoJsonLayer does not compensate for CSS transforms

[federicoviscomi]

Module

• deck.gl-community/arrow-layers
• deck.gl-community/bing-maps
• deck.gl-community/editable-layers
• deck.gl-community/experimental
• deck.gl-community/graph-layers
• deck.gl-community/layers
• deck.gl-community/react
• deck.gl-community/react-graph-layer

Description

When drawing a polygon on a map, the polygon is not drawn in the same points where I click. (on the other hand deck.gl appears to compensate properly for CSS transforms)

Expected Behavior

No response

Steps to Reproduce

Draw a polygon here https://codesandbox.io/p/sandbox/deck-gl-community-editable-layers-css-scale-bug-xzy7zr

Environment

• Framework version: react-scripts
• Browser: Google Chrome Version 130.0.6723.70 (Official Build) (64-bit)
• OS: Windows 11 Pro

Logs

No response

[rjwats]

We have worked around this issue with the following hack (which we had in place when using nebula.gl too)

/**
 * This code hacks editable-layers to make the getScreenCoords function work with a CSS scale transformation applied
 */
export const applyEditableGeoJsonLayerOverrides = () => {
  EditableGeoJsonLayer.prototype.getScreenCoords = (function (this: EditableGeoJsonLayer, pointerEvent: any): [number, number] {
    const canvas = this.context.device.getCanvasContext().canvas as HTMLCanvasElement;
    const rect = canvas.getBoundingClientRect();
    const scaleX = rect.width / canvas.offsetWidth;
    const scaleY = rect.height / canvas.offsetHeight;
    return [
      (pointerEvent.clientX - rect.left - canvas.clientLeft) / scaleX,
      (pointerEvent.clientY - rect.top - canvas.clientTop) / scaleY
    ];
  });
};