@gravity-ui/graph
Version:
Modern graph editor component
81 lines (80 loc) • 3.52 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.usableRectPath = new Path2D();
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() {
super.render();
const cameraState = this.context.camera.getCameraState();
this.context.ctx.fillStyle = this.context.colors.canvas.belowLayerBackground;
this.context.ctx.fillRect(-cameraState.relativeX - 10, -cameraState.relativeY - 10, cameraState.relativeWidth + 20, cameraState.relativeHeight + 20);
this.context.ctx.lineWidth = this.context.camera.limitScaleEffect(3, 15);
this.context.ctx.strokeStyle = this.context.colors.canvas.border;
this.context.ctx.fillStyle = this.context.colors.canvas.layerBackground;
this.context.ctx.fill(this.usableRectPath);
this.context.ctx.stroke(this.usableRectPath);
}
subscribe() {
return this.context.graph.hitTest.onUsableRectUpdate(this.setupExtendedUsableRect);
}
isGeometryChanged(nextState) {
return (nextState.x !== this.state.x ||
nextState.y !== this.state.y ||
nextState.height !== this.state.height ||
nextState.width !== this.state.width);
}
stateChanged(nextState) {
if (this.isGeometryChanged(nextState)) {
this.usableRectPath = new Path2D();
this.usableRectPath.rect(nextState.x, nextState.y, nextState.width, nextState.height);
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,
}),
];
}
}