Areas and Lines are a little Broken in Tutorial

[tannerwuster]

Description

• When adding playground to the area section of the tutorial, the dialog tutorial box obstructs the editing of the area. This can be fixed if you zoom browser out to 110%
• The endpoint that we need to drag is obstructed by the tutorial dialog box

Screenshots

Version

Canary 2.3.2

What browser are you seeing the problem on? What version are you running?

Chrome v119

The OS you're using

MacOS 14.1.1

Steps to reproduce

Go through the tutorial until you get to Areas and Lines

The browser URL at the time you encountered the bug

https://rapideditor.org/canary#map=20.00/10.11413/76.49622&background=Bing&datasets=fbRoads,msBuildings&disable_features=boundaries&id=w800462434

The auto-detected useragent string for your browser (leave blank if you're manually filling this form out)

No response

[bhousel]

Thanks, I'll check this.. I think those cut out boxes are supposed to be defined as Extents , so they should really stay a consistent size.

[bhousel]

Oh it's probably this:

Rapid/modules/ui/intro/UiCurtain.js

Lines 80 to 89 in f26a9b8

	// bhousel todo
	// I think if the use resizes the sidebar, it will affect the size of mainmap
	// and the math of things will be wrong. We might need to build some UiSystem
	// resize event instead of just listening to the `window` resize event.
	// register event handlers
	d3_select(window).on('resize.curtain', this.resize);
	this.context.systems.map.on('move', this.redraw);
	this.resize(); // get the width/height

Since #1497, the sidebar will remember it's width, that might affect the curtain math 🤔
(I also noticed that manually resizing the window will trigger the resize and fix the curtain placement).

Fortunately I did build "some kind of UISystem resize event" as part of #1497 so I'll switch the curtain over to using it! 😁

[bhousel]

It was a bit more than just the resize event, but that was helpful that we can listen to a better event now.

The issue was that

• We were caching rectangles for the map size and container size, and these things could
  be off by a little bit after the user resizes or the sidebar changes size, so we don't
  cache them anymore, we just call getBoundingClientRect() at the time we need the rectangle

I also fixed how we treat revealExtent:

• These were previously just treated as rectangles, which would be wrong when
  the map rotates. This wasn't too much of an issue, because we didn't ask the
  user to rotate the map during the steps where we would reveal an Extent.
• But now we treat them as polygons and project each corner, so they can
  handle being rotated and resized much better than before.

Screen.Recording.2024-09-06.at.11.33.19.AM.mp4