@gravity-ui/graph
Version:
Modern graph editor component
72 lines (71 loc) • 3.18 kB
JavaScript
import { ESchedulerPriority } from "../../../../lib";
import { Component } from "../../../../lib/Component";
import { debounce } from "../../../../utils/functions";
import { Rect } from "../../../../utils/types/shapes";
import { PointerGrid } from "./PointerGrid";
export class Background extends Component {
constructor(props, parent) {
super(props, parent);
this.extendedUsableRect = new Rect(0, 0, 0, 0);
this.setupExtendedUsableRect = debounce((usableRect) => {
if (usableRect.x - this.context.constants.system.USABLE_RECT_GAP !== this.extendedUsableRect.x) {
this.setState({
x: usableRect.x - this.context.constants.system.USABLE_RECT_GAP,
});
}
if (usableRect.y - this.context.constants.system.USABLE_RECT_GAP !== this.extendedUsableRect.y) {
this.setState({
y: usableRect.y - this.context.constants.system.USABLE_RECT_GAP,
});
}
if (usableRect.width + this.context.constants.system.USABLE_RECT_GAP * 2 !== this.extendedUsableRect.width) {
this.setState({
width: usableRect.width + this.context.constants.system.USABLE_RECT_GAP * 2,
});
}
if (usableRect.height + this.context.constants.system.USABLE_RECT_GAP * 2 !== this.extendedUsableRect.height) {
this.setState({
height: usableRect.height + this.context.constants.system.USABLE_RECT_GAP * 2,
});
}
}, {
priority: ESchedulerPriority.HIGHEST,
});
this.unsubscribe = this.subscribe();
}
render() {
const cameraState = this.context.camera.getCameraState();
this.context.ctx.fillStyle = this.context.colors.canvas.belowLayerBackground;
this.context.ctx.fillRect(-cameraState.relativeX, -cameraState.relativeY, cameraState.relativeWidth, cameraState.relativeHeight);
this.context.ctx.lineWidth = Math.floor(3 / cameraState.scale);
this.context.ctx.strokeStyle = this.context.colors.canvas.border;
this.context.ctx.strokeRect(this.state.x, this.state.y, this.state.width, this.state.height);
this.context.ctx.fillStyle = this.context.colors.canvas.layerBackground;
this.context.ctx.fillRect(this.state.x, this.state.y, this.state.width, this.state.height);
this.context.ctx.fillStyle = "black";
this.context.ctx.font = "48px serif";
return;
}
subscribe() {
return this.context.graph.hitTest.onUsableRectUpdate(this.setupExtendedUsableRect);
}
stateChanged(_nextState) {
this.shouldUpdateChildren = true;
super.stateChanged(_nextState);
}
unmount() {
super.unmount();
this.setupExtendedUsableRect.cancel();
this.unsubscribe();
}
updateChildren() {
return [
PointerGrid.create({
x: this.state.x,
y: this.state.y,
width: this.state.width,
height: this.state.height,
}),
];
}
}