Keep the frame rate up while painting a big tilemap (#347)
Painting on the 60x60 map of a project with fifty objects dropped the editor to 20 to 39 fps. A profile of a brush stroke showed four causes, none of them the brush itself. - Each frame of a stroke previews the model. The asset and hierarchy panels then built every row anew, so every label became a new text and a new upload to the GPU. One run spent 46 % of the main thread in those uploads. ListView.setItems now keeps a row whose item draws the same (sameListItem) and builds only the rows that changed. - The brush drew the whole scene on every pointer event, on top of the preview. Now the preview draws what the stroke changed, once a frame. The rectangle tool asks for one drawing a frame for its box. - An animated tile made the view draw in the tick and the preview drew it again in the same frame. animate now asks just before the frame is drawn and stays out when the view was drawn since the tick began. - layoutSymbols ran on every drawing and costs up to the cube of the symbols. SymbolLayoutMemo keeps the spots while no anchor moves. - A painted cell made the map read every "x,y" key again, and once more for each of the eight neighbours of every cell. layerCells reads a layer once per content into an index by place. layerTiles and the blocking cells take their neighbours from there (neighboursIn). parseCellKey reads a key without split, with the same results. The test hook sceneRedraws counts how often the scene view was drawn. Not done: a painted cell still works out the tiles and blocking cells of the whole map again, so that part grows with the map. Tests: - Brush stroke on a copy of the project (stein2, Chrome): 20 to 39 fps before, 47.5 after, 55 to 57 without painting. Labels drawn again during the stroke 2012 before, none after. Scene drawings per frame 1.32 before, 1 after. - One painted cell, headless: 28 to 16 ms on 60x60, 109 to 49 ms on the same map doubled to 120x120. - frame-preview: 2 new, red with the old pointer redraw. - tilemap: 3 new (key reading, index, refresh), list-ping 1 new, symbol-layout 1 new. 5 single reversals turned each red. - e2e 39,40 (melektaus-atx): ALL PASSED, 107 checks (1 new, a fast stroke: 6 drawings in 6 frames, no label drawn again). With the row reuse and the pointer redraw reverted it fails: 24 drawings in 3 frames, and the panels draw their labels again. - Gate (melektaus-atx): CHECK EXIT 0, 260 files, 4038 tests. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
101b12504e
commit
4c7861b5b8
13 files changed
+397
-44
No files matched your search
@@ -50,6 +50,25 @@ export function pingAlpha(elapsed: number): number {
|
||||
return PING_ALPHA * (1 - (elapsed - hold) / (PING_MS - hold));
|
||||
}
|
||||
|
||||
/** Whether a row drawn for `a` shows `b` just the same. */
|
||||
export function sameListItem(a: ListItem, b: ListItem): boolean {
|
||||
const marks = a.marks ?? [];
|
||||
const others = b.marks ?? [];
|
||||
return (
|
||||
a.id === b.id &&
|
||||
a.label === b.label &&
|
||||
a.hint === b.hint &&
|
||||
(a.depth ?? 0) === (b.depth ?? 0) &&
|
||||
a.expanded === b.expanded &&
|
||||
Boolean(a.overridden) === Boolean(b.overridden) &&
|
||||
a.icon === b.icon &&
|
||||
Boolean(a.iconAtEnd) === Boolean(b.iconAtEnd) &&
|
||||
Boolean(a.heading) === Boolean(b.heading) &&
|
||||
marks.length === others.length &&
|
||||
marks.every((mark, i) => mark === others[i])
|
||||
);
|
||||
}
|
||||
|
||||
let instances = 0;
|
||||
|
||||
/** Modifier keys held while a row was clicked. */
|
||||
@@ -133,19 +152,29 @@ export class ListView extends Widget {
|
||||
}
|
||||
|
||||
/**
|
||||
* Rebuilds all rows. The selection survives when its id is still present and is dropped
|
||||
* silently otherwise; highlights are kept as they are (the owner refreshes them).
|
||||
* Rebuilds the rows that changed and keeps the others: a new row draws its texts again, and the
|
||||
* panels set their items on every model event – each frame of a drag (#347). The selection
|
||||
* survives when its id is still present and is dropped silently otherwise; highlights are kept as
|
||||
* they are (the owner refreshes them).
|
||||
*/
|
||||
setItems(items: ListItem[]): void {
|
||||
this.items = items;
|
||||
for (const row of this.rows) row.destroy({ children: true });
|
||||
const held = new Map(this.rows.map((row) => [row.item.id, row]));
|
||||
this.rows = items.map((item, index) => {
|
||||
const row = new ListRow(item, this.rowHeight, Boolean(this.onToggle));
|
||||
row.on('pointerdown', (e: FederatedPointerEvent) => this.onRowPress(row, e));
|
||||
const kept = held.get(item.id);
|
||||
let row: ListRow;
|
||||
if (kept && sameListItem(kept.item, item)) {
|
||||
held.delete(item.id);
|
||||
row = kept;
|
||||
} else {
|
||||
row = new ListRow(item, this.rowHeight, Boolean(this.onToggle));
|
||||
row.on('pointerdown', (e: FederatedPointerEvent) => this.onRowPress(row, e));
|
||||
this.addChild(row);
|
||||
}
|
||||
row.position.set(0, index * this.rowHeight);
|
||||
this.addChild(row);
|
||||
return row;
|
||||
});
|
||||
for (const row of held.values()) row.destroy({ children: true });
|
||||
this.addChild(this.pingMarker, this.dropMarker); // keep the markers above the rows
|
||||
if (this.selectedId && !items.some((i) => i.id === this.selectedId)) this.selectedId = null;
|
||||
if (this.contextId && !items.some((i) => i.id === this.contextId)) this.contextId = null;
|
||||
|
||||
Reference in new issue
Block a user