feat(ui): do not fill brush preview when drawing

This commit is contained in:
psychedelicious 2024-06-06 17:03:28 +10:00
parent bee3fa339d
commit 37ac7d8ed5
2 changed files with 7 additions and 3 deletions

View File

@ -74,6 +74,7 @@ const useStageRenderer = (
const tool = useStore($tool); const tool = useStore($tool);
const lastCursorPos = useStore($lastCursorPos); const lastCursorPos = useStore($lastCursorPos);
const lastMouseDownPos = useStore($lastMouseDownPos); const lastMouseDownPos = useStore($lastMouseDownPos);
const isDrawing = useStore($isDrawing);
const brushColor = useAppSelector(selectBrushColor); const brushColor = useAppSelector(selectBrushColor);
const selectedLayer = useAppSelector(selectSelectedLayer); const selectedLayer = useAppSelector(selectSelectedLayer);
const layerIds = useMemo(() => state.layers.map((l) => l.id), [state.layers]); const layerIds = useMemo(() => state.layers.map((l) => l.id), [state.layers]);
@ -249,7 +250,8 @@ const useStageRenderer = (
state.globalMaskLayerOpacity, state.globalMaskLayerOpacity,
lastCursorPos, lastCursorPos,
lastMouseDownPos, lastMouseDownPos,
state.brushSize state.brushSize,
isDrawing
); );
}, [ }, [
asPreview, asPreview,
@ -262,6 +264,7 @@ const useStageRenderer = (
lastMouseDownPos, lastMouseDownPos,
state.brushSize, state.brushSize,
renderers, renderers,
isDrawing,
]); ]);
useLayoutEffect(() => { useLayoutEffect(() => {

View File

@ -88,7 +88,8 @@ export const renderToolPreview = (
globalMaskLayerOpacity: number, globalMaskLayerOpacity: number,
cursorPos: Vector2d | null, cursorPos: Vector2d | null,
lastMouseDownPos: Vector2d | null, lastMouseDownPos: Vector2d | null,
brushSize: number brushSize: number,
isDrawing: boolean
): void => { ): void => {
const layerCount = stage.find(selectRenderableLayers).length; const layerCount = stage.find(selectRenderableLayers).length;
// Update the stage's pointer style // Update the stage's pointer style
@ -133,7 +134,7 @@ export const renderToolPreview = (
x: cursorPos.x, x: cursorPos.x,
y: cursorPos.y, y: cursorPos.y,
radius: brushSize / 2, radius: brushSize / 2,
fill: rgbaColorToString(brushColor), fill: isDrawing ? '' : rgbaColorToString(brushColor),
globalCompositeOperation: tool === 'brush' ? 'source-over' : 'destination-out', globalCompositeOperation: tool === 'brush' ? 'source-over' : 'destination-out',
}); });