@gravity-ui/graph
Version:
Modern graph editor component
44 lines (43 loc) • 2.22 kB
JavaScript
import { Component } from "../../../../lib/Component";
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.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.extendedUsableRect.x, this.extendedUsableRect.y, this.extendedUsableRect.width, this.extendedUsableRect.height);
this.context.ctx.fillStyle = this.context.colors.canvas.layerBackground;
this.context.ctx.fillRect(this.extendedUsableRect.x, this.extendedUsableRect.y, this.extendedUsableRect.width, this.extendedUsableRect.height);
this.context.ctx.fillStyle = "black";
this.context.ctx.font = "48px serif";
return;
}
subscribe() {
this.blocksStore = this.context.graph.rootStore.blocksList;
return this.blocksStore.$usableRect.subscribe((usableRect) => {
this.setupExtendedUsableRect(usableRect);
this.performRender();
});
}
setupExtendedUsableRect(usableRect) {
this.extendedUsableRect.x = usableRect.x - this.context.constants.system.USABLE_RECT_GAP;
this.extendedUsableRect.y = usableRect.y - this.context.constants.system.USABLE_RECT_GAP;
this.extendedUsableRect.width = usableRect.width + this.context.constants.system.USABLE_RECT_GAP * 2;
this.extendedUsableRect.height = usableRect.height + this.context.constants.system.USABLE_RECT_GAP * 2;
}
unmount() {
super.unmount();
this.unsubscribe();
}
updateChildren() {
return [PointerGrid.create(this.extendedUsableRect)];
}
}