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

fix(ui): rerenders when changing canvas scale

Browse Source
This commit is contained in:
psychedelicious 2024-08-19 15:37:42 +10:00
parent 0c2b8edc8d
commit 982535eb92
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/features/controlLayers/components/CanvasScale.tsx
View File

@ -19,6 +19,7 @@ import { MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/controlLayers/konva
import { snapToNearest } from 'features/controlLayers/konva/util'; import { snapToNearest } from 'features/controlLayers/konva/util';
import { $stageAttrs } from 'features/controlLayers/store/canvasV2Slice'; import { $stageAttrs } from 'features/controlLayers/store/canvasV2Slice';
import { clamp, round } from 'lodash-es'; import { clamp, round } from 'lodash-es';
import { computed } from 'nanostores';
import type { KeyboardEvent } from 'react'; import type { KeyboardEvent } from 'react';
import { memo, useCallback, useEffect, useState } from 'react'; import { memo, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -71,11 +72,13 @@ const sliderDefaultValue = mapScaleToSliderValue(100);
const snapCandidates = marks.slice(1, marks.length - 1); const snapCandidates = marks.slice(1, marks.length - 1);
const $scale = computed($stageAttrs, (attrs) => attrs.scale);
export const CanvasScale = memo(() => { export const CanvasScale = memo(() => {
const { t } = useTranslation(); const { t } = useTranslation();
const canvasManager = useStore($canvasManager); const canvasManager = useStore($canvasManager);
const stageAttrs = useStore($stageAttrs); const scale = useStore($scale);
const [localScale, setLocalScale] = useState(stageAttrs.scale * 100); const [localScale, setLocalScale] = useState(scale * 100);
const onChangeSlider = useCallback( const onChangeSlider = useCallback(
(scale: number) => { (scale: number) => {
@ -119,8 +122,8 @@ export const CanvasScale = memo(() => {
); );
useEffect(() => { useEffect(() => {
setLocalScale(stageAttrs.scale * 100); setLocalScale(scale * 100);
}, [stageAttrs.scale]); }, [scale]);
return ( return (
<Popover> <Popover>