51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import React, { createRef } from "react";
|
|
|
|
interface IProps {
|
|
width?: number;
|
|
height?: number;
|
|
backgroundImage?: ImageBitmap;
|
|
blur?: string;
|
|
}
|
|
|
|
|
|
export default class BackdropPanel extends React.PureComponent<IProps> {
|
|
private canvasRef: React.RefObject<HTMLCanvasElement> = createRef();
|
|
private ctx: CanvasRenderingContext2D;
|
|
|
|
static defaultProps = {
|
|
blur: "60px",
|
|
}
|
|
|
|
public componentDidMount() {
|
|
this.ctx = this.canvasRef.current.getContext("2d");
|
|
}
|
|
|
|
public componentDidUpdate() {
|
|
if (this.props.backgroundImage) {
|
|
requestAnimationFrame(this.refreshBackdropImage);
|
|
}
|
|
}
|
|
|
|
private refreshBackdropImage = (): void => {
|
|
const { width, height, backgroundImage } = this.props;
|
|
this.canvasRef.current.width = width;
|
|
this.canvasRef.current.height = height;
|
|
|
|
const destinationX = width - backgroundImage.width;
|
|
const destinationY = height - backgroundImage.height;
|
|
|
|
this.ctx.filter = `blur(${this.props.blur})`;
|
|
this.ctx.drawImage(
|
|
backgroundImage,
|
|
Math.min(destinationX, 0),
|
|
Math.min(destinationY, 0),
|
|
Math.max(width, backgroundImage.width),
|
|
Math.max(height, backgroundImage.height),
|
|
);
|
|
}
|
|
|
|
public render() {
|
|
return <canvas ref={this.canvasRef} className="mx_BackdropPanel" />;
|
|
}
|
|
}
|