Fix minimap rerendering on scroll

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

View File

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

View File

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