PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve BackdropPanel performance by ignoring React

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-13 18:12:02 +02:00
parent 5f9b55eaa9
commit 7f58a21aac
No known key found for this signature in database
GPG key ID: 28DFE7164F497CB6
2 changed files with 47 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/structures/BackdropPanel.tsx
View file

@ -23,26 +23,22 @@ interface IProps {
backgroundImage?: CanvasImageSource;
}
interface IState {
spacePanelWidth: number;
roomListWidth: number;
viewportHeight: number;
}
export default class BackdropPanel extends React.PureComponent<IProps, IState> {
export default class BackdropPanel extends React.PureComponent<IProps> {
private spacesCanvasRef = createRef<HTMLCanvasElement>();
private roomListCanvasRef = createRef<HTMLCanvasElement>();
private spacesCtx: CanvasRenderingContext2D;
private roomListCtx: CanvasRenderingContext2D;
private sizes = {
spacePanelWidth: 0,
roomListWidth: 0,
height: 0,
};
private currentFrame?: number;
constructor(props: IProps) {
super(props);
this.state = {
spacePanelWidth: 0,
roomListWidth: 0,
viewportHeight: UIStore.instance.windowHeight,
};
}
public componentDidMount() {
@ -52,30 +48,41 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
UIStore.instance.on("LeftPanel", this.onResize);
}
public componentDidUpdate() {
if (this.props.backgroundImage) {
this.refreshBackdropImage();
}
}
public componentWillUnmount() {
UIStore.instance.off("SpacePanel", this.onResize);
UIStore.instance.off("LeftPanel", this.onResize);
}
public componentDidUpdate() {
if (this.props.backgroundImage) {
requestAnimationFrame(this.refreshBackdropImage);
}
}
private onResize = () => {
const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel");
this.setState({
spacePanelWidth: spacePanelDimensions ? spacePanelDimensions.width : 0,
roomListWidth: roomListDimensions ? roomListDimensions.width : 0,
viewportHeight: UIStore.instance.windowHeight,
});
this.sizes = {
spacePanelWidth: spacePanelDimensions?.width ?? 0,
roomListWidth: roomListDimensions?.width ?? 0,
height: UIStore.instance.windowHeight,
};
if (this.props.backgroundImage) {
this.refreshBackdropImage();
}
};
private animate = () => {
if (this.currentFrame !== undefined) {
cancelAnimationFrame(this.currentFrame);
this.currentFrame = undefined;
}
this.currentFrame = requestAnimationFrame(this.refreshBackdropImage);
};
private refreshBackdropImage = (): void => {
const width = this.state.spacePanelWidth + this.state.roomListWidth;
const height = this.state.viewportHeight;
const { spacePanelWidth, roomListWidth, height } = this.sizes;
const width = spacePanelWidth + roomListWidth;
const { backgroundImage } = this.props;
const imageWidth = (backgroundImage as ImageBitmap).width
@ -98,10 +105,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
const x = (width - resultWidth) / 2;
const y = (height - resultHeight) / 2;
this.spacesCanvasRef.current.width = this.state.spacePanelWidth;
this.spacesCanvasRef.current.height = this.state.viewportHeight;
this.roomListCanvasRef.current.width = this.state.roomListWidth;
this.roomListCanvasRef.current.height = this.state.viewportHeight;
this.spacesCanvasRef.current.width = spacePanelWidth;
this.spacesCanvasRef.current.height = height;
this.roomListCanvasRef.current.width = roomListWidth;
this.roomListCanvasRef.current.height = height;
this.roomListCanvasRef.current.style.transform = `translateX(${spacePanelWidth}px)`;
this.spacesCtx.filter = `blur(30px)`;
this.roomListCtx.filter = `blur(60px)`;
@ -116,7 +124,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
backgroundImage,
0, 0,
imageWidth, imageHeight,
x - this.state.spacePanelWidth,
x - spacePanelWidth,
y,
resultWidth,
resultHeight,
@ -134,7 +142,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
/>
<canvas
style={{
transform: `translateX(${this.state.spacePanelWidth}px)`,
transform: `translateX(0)`,
opacity: .1,
}}
ref={this.roomListCanvasRef}

10
src/components/views/spaces/SpacePanel.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ComponentProps, Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react";
import React, { ComponentProps, Dispatch, ReactNode, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import classNames from "classnames";
import { Room } from "matrix-js-sdk/src/models/room";
@ -42,8 +42,8 @@ import IconizedContextMenu, {
IconizedContextMenuOptionList,
} from "../context_menus/IconizedContextMenu";
import SettingsStore from "../../../settings/SettingsStore";
import UIStore from "../../../stores/UIStore";
import { SettingLevel } from "../../../settings/SettingLevel";
import UIStore from "../../../stores/UIStore";
const useSpaces = (): [Room[], Room[], Room | null] => {
const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@ -207,6 +207,11 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
const SpacePanel = () => {
const [isPanelCollapsed, setPanelCollapsed] = useState(true);
const ref = useRef<HTMLUListElement>();
useLayoutEffect(() => {
UIStore.instance.trackElementDimensions("SpacePanel", ref.current);
return () => UIStore.instance.stopTrackingElementDimensions("SpacePanel");
}, []);
const onKeyDown = (ev: React.KeyboardEvent) => {
let handled = true;
@ -281,6 +286,7 @@ const SpacePanel = () => {
onKeyDown={onKeyDownHandler}
role="tree"
aria-label={_t("Spaces")}
ref={ref}
>
<Droppable droppableId="top-level-spaces">
{ (provided, snapshot) => (