foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix minimap rerendering on scroll

Browse Source
This commit is contained in:
tk338g 2021-02-08 23:34:19 +01:00
parent 93d0a56bdb
commit 3b0aff0ac6
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/actions/actionMenu.tsx
View File

@ -99,7 +99,7 @@ export const actionMinimap = register({
}, },
PanelComponent: ({ appState, elements }) => PanelComponent: ({ appState, elements }) =>
appState.isMinimapEnabled ? ( appState.isMinimapEnabled ? (
<MiniMap appState={appState} elements={getNonDeletedElements(elements)} /> <MiniMap appState={appState} elements={elements} />
) : null, ) : null,
keyTest: (event) => event.key === KEYS.M, keyTest: (event) => event.key === KEYS.M,
}); });

23
src/components/MiniMap.tsx
View File

@ -1,8 +1,8 @@
import "./MiniMap.scss"; import "./MiniMap.scss";
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef, useMemo } from "react";
import { getCommonBounds } from "../element"; import { getCommonBounds, getNonDeletedElements } from "../element";
import { NonDeletedExcalidrawElement } from "../element/types"; import { ExcalidrawElement } from "../element/types";
import { exportToCanvas } from "../scene/export"; import { exportToCanvas } from "../scene/export";
import { AppState } from "../types"; import { AppState } from "../types";
import { distance, viewportCoordsToSceneCoords } from "../utils"; import { distance, viewportCoordsToSceneCoords } from "../utils";
@ -16,14 +16,13 @@ const MinimapViewport = ({
elements, elements,
appState, appState,
}: { }: {
elements: readonly NonDeletedExcalidrawElement[]; elements: readonly ExcalidrawElement[];
appState: AppState; appState: AppState;
}) => { }) => {
if (elements.length === 0) { const [minX, minY, maxX, maxY] = useMemo(
return null; () => getCommonBounds(getNonDeletedElements(elements)),
} [elements],
);
const [minX, minY, maxX, maxY] = getCommonBounds(elements);
const minimapScale = Math.min( const minimapScale = Math.min(
MINIMAP_WIDTH / distance(minX, maxX), MINIMAP_WIDTH / distance(minX, maxX),
@ -88,7 +87,7 @@ export function MiniMap({
elements, elements,
}: { }: {
appState: AppState; appState: AppState;
elements: readonly NonDeletedExcalidrawElement[]; elements: readonly ExcalidrawElement[];
}) { }) {
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const appStateRef = useRef<AppState>(appState); const appStateRef = useRef<AppState>(appState);
@ -99,8 +98,9 @@ export function MiniMap({
if (!canvasNode) { if (!canvasNode) {
return; return;
} }
exportToCanvas( exportToCanvas(
elements, getNonDeletedElements(elements),
appStateRef.current, appStateRef.current,
{ {
exportBackground: true, exportBackground: true,
@ -127,6 +127,7 @@ export function MiniMap({
width: MINIMAP_WIDTH, width: MINIMAP_WIDTH,
height: MINIMAP_HEIGHT, height: MINIMAP_HEIGHT,
position: "relative", position: "relative",
overflow: "hidden",
backgroundColor: appState.viewBackgroundColor, backgroundColor: appState.viewBackgroundColor,
}} }}
> >