Automatic adjustment of projection fit on resizing

[olange]

When the host element resizes, the bounding client rectangle of the SVG canvas of the world map must be measured again. Then the view box of the SVG canvas must be updated accordingly; and the D3-geo projection must fit within the new SVG view box.

Those tasks are currently performed only after first paint, by the render() (which will update the view box on the SVG element of the map) and the _measureSVGElement() instance methods, and lastly, by the projFn getter.

By the way, review how we fit the projection. A code fragment I spotted in @d3/projection-comparison Observable notebook seems more precise than ours.

Another appealing feature of Resize Observers: « […] ResizeObserver processing happens between layout and paint. » And any change to layout will only invalidate layout, not paint.

Reference articles

• From Lit › Lifecycle › Completing an update documentation:
  « Implement firstUpdated() to perform one-time work after the component's DOM has been created. Some examples might include focusing a particular rendered element or adding a ResizeObserver or IntersectionObserver to an element. »
• web.dev › ResizeObserver: it’s like document.onresize for elements
• mdn web docs › ResizeObserver

See also

• Automatic zooming on the bounding box #5
• Automatic centering on the bounding box #4
• Import and refactor code from source @olange/h3-minimap Observable notebook #19