fix(ui): brush preview cursor jank

This commit is contained in:
psychedelicious 2024-04-20 16:23:37 +10:00 committed by Kent Keirsey
parent 15018fdbc0
commit a7d69aa0a9

View File

@ -3,6 +3,8 @@ import { rgbColorToString } from 'features/canvas/util/colorToString';
import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition'; import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
import type { Layer, RegionalPromptLayer, RPTool } from 'features/regionalPrompts/store/regionalPromptsSlice'; import type { Layer, RegionalPromptLayer, RPTool } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { import {
$isMouseOver,
$tool,
BRUSH_PREVIEW_BORDER_INNER_ID, BRUSH_PREVIEW_BORDER_INNER_ID,
BRUSH_PREVIEW_BORDER_OUTER_ID, BRUSH_PREVIEW_BORDER_OUTER_ID,
BRUSH_PREVIEW_FILL_ID, BRUSH_PREVIEW_FILL_ID,
@ -63,19 +65,24 @@ export const renderBrushPreview = (
stage.add(layer); stage.add(layer);
// The brush preview is hidden and shown as the mouse leaves and enters the stage // The brush preview is hidden and shown as the mouse leaves and enters the stage
stage.on('mousemove', (e) => { stage.on('mousemove', (e) => {
e.target.getStage()?.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`)?.visible(true); e.target
.getStage()
?.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`)
?.visible($tool.get() !== 'move');
}); });
stage.on('mouseleave', (e) => { stage.on('mouseleave', (e) => {
e.target.getStage()?.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`)?.visible(false); e.target.getStage()?.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`)?.visible(false);
}); });
stage.on('mouseenter', (e) => { stage.on('mouseenter', (e) => {
e.target.getStage()?.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`)?.visible(true); e.target
.getStage()
?.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`)
?.visible($tool.get() !== 'move');
}); });
} }
if (!layer.visible()) { if (!$isMouseOver.get()) {
// Rely on the mouseenter and mouseleave events as a "first pass" for brush preview visibility. If it is not visible layer.visible(false);
// inside this render function, we do not want to make it visible again...
return; return;
} }