Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes disappearing canvas grid lines

Browse Source
This commit is contained in:
psychedelicious
2022-11-13 22:42:07 +11:00
committed by blessedcoolant
parent c223d93b4d
commit 73099af6ec
1 changed files with 103 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/features/canvas/IAICanvasGrid.tsx
View File

@ -1,24 +1,54 @@
// Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/ // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
import { useColorMode } from '@chakra-ui/react'; import { useColorMode } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import _ from 'lodash'; import _ from 'lodash';
import {
ReactNode,
useCallback,
useEffect,
useLayoutEffect,
useState,
} from 'react';
import { Group, Line as KonvaLine } from 'react-konva'; import { Group, Line as KonvaLine } from 'react-konva';
import { currentCanvasSelector } from './canvasSlice';
import useUnscaleCanvasValue from './hooks/useUnscaleCanvasValue'; import useUnscaleCanvasValue from './hooks/useUnscaleCanvasValue';
import { stageRef } from './IAICanvas'; import { stageRef } from './IAICanvas';
const selector = createSelector(
[currentCanvasSelector],
(currentCanvas) => {
const { stageScale, stageCoordinates, stageDimensions } = currentCanvas;
return { stageScale, stageCoordinates, stageDimensions };
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
},
}
);
const IAICanvasGrid = () => { const IAICanvasGrid = () => {
const { colorMode } = useColorMode(); const { colorMode } = useColorMode();
const unscale = useUnscaleCanvasValue(); // const unscale = useUnscaleCanvasValue();
const { stageScale, stageCoordinates, stageDimensions } =
useAppSelector(selector);
const [gridLines, setGridLines] = useState<ReactNode[]>([]);
if (!stageRef.current) return null; const unscale = useCallback(
(value: number) => {
return value / stageScale;
},
[stageScale]
);
useLayoutEffect(() => {
const gridLineColor = const gridLineColor =
colorMode === 'light' ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.3)'; colorMode === 'light' ? 'rgba(136, 136, 136, 1)' : 'rgba(84, 84, 84, 1)';
const stage = stageRef.current; const { width, height } = stageDimensions;
const width = stage.width(); const { x, y } = stageCoordinates;
const height = stage.height();
const x = stage.x();
const y = stage.y();
const stageRect = { const stageRect = {
x1: 0, x1: 0,
@ -59,9 +89,7 @@ const IAICanvasGrid = () => {
xSteps = Math.round(xSize / 64) + 1, xSteps = Math.round(xSize / 64) + 1,
ySteps = Math.round(ySize / 64) + 1; ySteps = Math.round(ySize / 64) + 1;
return ( const xLines = _.range(0, xSteps).map((i) => (
<Group>
{_.range(0, xSteps).map((i) => (
<KonvaLine <KonvaLine
key={`x_${i}`} key={`x_${i}`}
x={fullRect.x1 + i * 64} x={fullRect.x1 + i * 64}
@ -70,8 +98,8 @@ const IAICanvasGrid = () => {
stroke={gridLineColor} stroke={gridLineColor}
strokeWidth={1} strokeWidth={1}
/> />
))} ));
{_.range(0, ySteps).map((i) => ( const yLines = _.range(0, ySteps).map((i) => (
<KonvaLine <KonvaLine
key={`y_${i}`} key={`y_${i}`}
x={fullRect.x1} x={fullRect.x1}
@ -80,9 +108,12 @@ const IAICanvasGrid = () => {
stroke={gridLineColor} stroke={gridLineColor}
strokeWidth={1} strokeWidth={1}
/> />
))} ));
</Group>
); setGridLines(xLines.concat(yLines));
}, [stageScale, stageCoordinates, stageDimensions, colorMode, unscale]);
return <Group>{gridLines}</Group>;
}; };
export default IAICanvasGrid; export default IAICanvasGrid;