perf(ui): do not recreate map callback on every render

This commit is contained in:
psychedelicious 2024-04-18 16:37:10 +10:00 committed by Kent Keirsey
parent 81f29b9624
commit f8bf985256

View File

@ -24,6 +24,7 @@ import { v4 as uuidv4 } from 'uuid';
const BRUSH_PREVIEW_BORDER_INNER_COLOR = 'rgba(0,0,0,1)'; const BRUSH_PREVIEW_BORDER_INNER_COLOR = 'rgba(0,0,0,1)';
const BRUSH_PREVIEW_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)'; const BRUSH_PREVIEW_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)';
const mapId = (object: { id: string }) => object.id;
/** /**
* Renders the brush preview for the selected tool. * Renders the brush preview for the selected tool.
@ -129,7 +130,7 @@ export const renderLayers = (
tool: Tool, tool: Tool,
onLayerPosChanged?: (layerId: string, x: number, y: number) => void onLayerPosChanged?: (layerId: string, x: number, y: number) => void
) => { ) => {
const reduxLayerIds = reduxLayers.map((l) => l.id); const reduxLayerIds = reduxLayers.map(mapId);
// Remove un-rendered layers // Remove un-rendered layers
for (const konvaLayer of stage.find<Konva.Layer>(`.${REGIONAL_PROMPT_LAYER_NAME}`)) { for (const konvaLayer of stage.find<Konva.Layer>(`.${REGIONAL_PROMPT_LAYER_NAME}`)) {
@ -217,7 +218,7 @@ export const renderLayers = (
assert(transparencyRect, `Transparency rect not found for layer ${reduxLayer.id}`); assert(transparencyRect, `Transparency rect not found for layer ${reduxLayer.id}`);
// Remove deleted objects // Remove deleted objects
const objectIds = reduxLayer.objects.map((o) => o.id); const objectIds = reduxLayer.objects.map(mapId);
for (const objectNode of konvaLayer.find(`.${REGIONAL_PROMPT_LAYER_LINE_NAME}`)) { for (const objectNode of konvaLayer.find(`.${REGIONAL_PROMPT_LAYER_LINE_NAME}`)) {
if (!objectIds.includes(objectNode.id())) { if (!objectIds.includes(objectNode.id())) {
objectNode.destroy(); objectNode.destroy();