Fill texture and tilemap collision only where it is being edited

The faint fill on every frame outline and on every tilemap made the
scene and the texture editor look green all over. Like the collider
before, the fill now shows only on what is selected, and a bit
stronger, so it marks the thing being worked on.

- Texture collision: all frame outlines stay visible. Only the
  outlines of the selected frame are filled, at alpha 0.3 instead of
  0.15 on every frame.
- Tilemap: the outline still shows where the whole map blocks. The
  fill appears only while the tilemap alone is selected, and only for
  the part the layer chosen in the panel adds. Solid is 0.3 and
  one-way 0.15, before 0.12 and 0.06 on every map.
- New query layerSolids(layerId) in items.ts. It builds the same
  solids for one layer and runs only for the selected map.
- The small landing wedge on one-way edges stays filled. It belongs
  to the edge marker, not to the area.

Not covered by tests: the texture canvas and the scene view wiring
that picks the map and the layer. Neither was looked at in a browser.

Tests:
- ./check.sh: 159 files, 2337 tests, CHECK EXIT 0 (before 2334)
- e2e 1-17,39-43: ALL PASSED, 668 checks
- 3 new unit tests in tests/viewport/tilemap-fill.test.ts
- Counter-check: with layerSolids ignoring the layer, exactly the
  layer test fails. Original restored, checked with cmp.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/texture/TextureCanvas.ts

@@ -31,7 +31,7 @@ import {
   withCornerMoved,
   withoutCorner,
 } from '../polygonEdit';
-import { dashedLine } from '../../viewport/symbols';
+import { COLLIDER_FILL_ALPHA, dashedLine } from '../../viewport/symbols';
 import { textureLibrary } from '../../viewport/TextureLibrary';
 import { FramePreview } from '../framePreview';
 import type { EditorState } from '../state';
@@ -604,7 +604,7 @@ export class TextureCanvas extends SheetCanvas<TextureAsset> {
       this.sheet.clear();
       const others = frames.filter((f) => f.id !== selectedId);
       for (const frame of others) this.drawFrame(this.sheet, view, frame, false);
-      for (const frame of others) this.drawOutlines(this.sheet, view, frame, false);
+      for (const frame of others) this.drawOutlines(this.sheet, view, frame, false, false);
       this.sheetBuilds += 1;
       this.sheetOutlines = others.reduce((n, f) => n + (f.collision?.length ?? 0), 0);
     }
@@ -612,7 +612,7 @@ export class TextureCanvas extends SheetCanvas<TextureAsset> {
     const selected = frames.find((f) => f.id === selectedId);
     if (selected) {
       this.drawFrame(this.overlay, view, selected, true);
-      this.drawOutlines(this.overlay, view, selected, this.collision);
+      this.drawOutlines(this.overlay, view, selected, this.collision, true);
       if (!this.collision) {
         this.drawBorders(view, selected);
         this.drawHandles(view, selected);
@@ -655,17 +655,27 @@ export class TextureCanvas extends SheetCanvas<TextureAsset> {
   /**
    * A frame's collision outlines (#141), always shown so one sees which frames block with them; on
    * the edited frame the active outline is drawn heavier and every corner of every outline gets a
-   * handle. An outline that is no polygon is drawn in red.
+   * handle. An outline that is no polygon is drawn in red. Only the selected frame's outlines are
+   * `filled`, so the tint does not lie over the art of every other frame.
    */
-  private drawOutlines(g: Graphics, view: SheetView, frame: TextureFrame, edited: boolean): void {
+  private drawOutlines(
+    g: Graphics,
+    view: SheetView,
+    frame: TextureFrame,
+    edited: boolean,
+    filled: boolean,
+  ): void {
     const outlines = frame.collision ?? [];
     const active = edited ? this.activeOutline(frame, outlines) : -1;
     for (const [index, points] of outlines.entries()) {
       const screen = points.map((p) => imageToLocal(view, frame.x + p.x, frame.y + p.y));
       const color = isPolygon(points) ? Theme.colors.collider : Theme.colors.danger;
       const width = index === active ? 2 : 1;
-      if (screen.length >= 3) g.poly(screen, true).fill({ color, alpha: 0.15 }).stroke({ width, color });
-      else if (screen.length === 2)
+      if (screen.length >= 3) {
+        g.poly(screen, true);
+        if (filled) g.fill({ color, alpha: COLLIDER_FILL_ALPHA });
+        g.stroke({ width, color });
+      } else if (screen.length === 2)
         g.moveTo(screen[0]!.x, screen[0]!.y).lineTo(screen[1]!.x, screen[1]!.y).stroke({ width: 2, color });
       if (!edited) continue;
       const half = HANDLE_SIZE / 2;

src/editor/viewport/SceneViewport.ts

@@ -27,7 +27,7 @@ import { FramePreview } from '../framePreview';
 import { type EditorState, objectSelection } from '../state';
 import { paintedLayerId, paintedTilemap } from '../panels/TilemapPanel';
 import { activeDrag, drawBand, drawGrid, endDrag, onDragChange, Theme, textStyle } from '../../ui';
-import { collectHolderItems, type DrawItem } from '../../viewport/items';
+import { collectHolderItems, type DrawItem, type TilemapSolids } from '../../viewport/items';
 import { menuTargetOf, type PointerHit, pressOn, stackAt } from '../../viewport/pick';
 import { openObjectMenu } from '../objectMenu';
 import { type LayerFocus, layerAlpha } from '../../viewport/tilemap';
@@ -569,10 +569,17 @@ export class SceneViewport extends FreeViewport {
     _extent: Extent,
   ): void {
     this.syncIcon(item, onScreen);
-    this.solids.sync(item, onScreen, scale);
+    this.solids.sync(item, onScreen, scale, onScreen ? this.paintedSolids(item) : null);
     this.syncLabel(item, onScreen, scale);
   }
 
+  /** Where the painted layer blocks, when `item` is the tilemap selected alone – that part is tinted. */
+  private paintedSolids(item: DrawItem): TilemapSolids | null {
+    const target = item.tilemap ? paintedTilemap(this.state) : null;
+    if (!target || target.objectId !== item.id) return null;
+    return item.tilemap!.layerSolids(paintedLayerId(this.state, target.asset));
+  }
+
   protected override disposeDecorations(id: string): void {
     this.labels.get(id)?.destroy();
     this.labels.delete(id);

src/editor/viewport/tilemapSolids.ts

@@ -5,11 +5,8 @@ import type { Vec2 } from '../../core/model/Properties';
 import { cellOrigin, tilemapTileSize } from '../../core/model/tilemap';
 import { type CellPolygon, type CellRect, solidBoundary } from '../../core/model/tilemapCollision';
 import { Theme } from '../../ui';
-import type { DrawItem } from '../../viewport/items';
-import { CONE_LENGTH, markBlockingSide, placeNode } from '../../viewport/symbols';
-
-/** Where a resolved tilemap blocks: what its outline in the scene view is worked out from. */
-type TilemapSolids = Pick<NonNullable<DrawItem['tilemap']>, 'solids' | 'outlines' | 'oneWay'>;
+import type { DrawItem, TilemapSolids } from '../../viewport/items';
+import { COLLIDER_FILL_ALPHA, CONE_LENGTH, markBlockingSide, placeNode } from '../../viewport/symbols';
 
 function sameSolids(a: TilemapSolids, b: TilemapSolids): boolean {
   const sameRects = (p: readonly CellRect[], q: readonly CellRect[]) =>
@@ -92,10 +89,11 @@ export class TilemapSolidOutlines {
   }
 
   /**
-   * The solid cells of a tilemap, drawn the way a collider is: tinted and outlined, above the
-   * content so a painted wall cannot hide them.
+   * The solid cells of a tilemap, drawn the way a collider is: outlined, above the content so a
+   * painted wall cannot hide them. Only `filled` is tinted – the part of the layer being painted
+   * while the map is selected – so the tint does not lie over every map's art.
    */
-  sync(item: DrawItem, show: boolean, scale: number): void {
+  sync(item: DrawItem, show: boolean, scale: number, filled: TilemapSolids | null = null): void {
     let node = this.nodes.get(item.id);
     const rects = item.tilemap?.solids ?? [];
     const outlines = item.tilemap?.outlines ?? [];
@@ -140,9 +138,11 @@ export class TilemapSolidOutlines {
         );
       node.stroke({ width: lineWidth, color });
     };
-    fill(rects, outlines, 0.12);
+    if (filled) {
+      fill(filled.solids, filled.outlines, COLLIDER_FILL_ALPHA);
+      fill(filled.oneWay.solids, filled.oneWay.outlines, COLLIDER_FILL_ALPHA / 2);
+    }
     stroke(boundary.solid, width);
-    fill(oneWay.solids, oneWay.outlines, 0.06);
     stroke(boundary.oneWay, width / 2);
     // A platform's top is what blocks, so that is what stands out, with the cone it lands within.
     const length = CONE_LENGTH / (scale * scaleOf(item.m));