@gravity-ui/graph/build/components/canvas/connections/BlockConnections.js

Modern graph editor component

import { Component } from "../../../lib/Component";
import { BatchPath2DRenderer } from "./BatchPath2D";
import { BlockConnection } from "./BlockConnection";
export class BlockConnections extends Component {
    get connections() {
        return this.context.graph.rootStore.connectionsList.$connections.value;
    }
    constructor(props, parent) {
        super(props, parent);
        this.batch = new BatchPath2DRenderer(() => this.performRender(), this.context.constants.connection.PATH2D_CHUNK_SIZE || 100);
        this.unsubscribe = this.subscribe();
        this.setContext({
            batch: this.batch,
        });
    }
    scheduleUpdate() {
        this.performRender();
        this.shouldUpdateChildren = true;
    }
    subscribe() {
        return [
            this.context.graph.rootStore.settings.$connectionsSettings.subscribe(() => {
                this.scheduleUpdate();
            }),
            this.context.graph.rootStore.connectionsList.$connections.subscribe(() => {
                this.scheduleUpdate();
            }),
            this.context.graph.rootStore.settings.$connection.subscribe(() => {
                this.scheduleUpdate();
            }),
        ];
    }
    unmount() {
        super.unmount();
        this.unsubscribe.forEach((reactionDisposer) => reactionDisposer());
    }
    updateChildren() {
        if (!this.connections)
            return [];
        const settings = this.context.graph.rootStore.settings.$connectionsSettings.value;
        const ConnectionCtop = this.context.graph.rootStore.settings.$connection.value || BlockConnection;
        return this.connections.map((connection) => {
            const props = {
                id: connection.id,
                useBezier: settings.useBezierConnections,
                bezierDirection: settings.bezierConnectionDirection,
                showConnectionLabels: settings.showConnectionLabels,
                showConnectionArrows: settings.showConnectionArrows,
            };
            return ConnectionCtop.create(props, { key: String(connection.id) });
        });
    }
    render() {
        const paths = this.batch.orderedPaths.get();
        for (const path of paths) {
            path.render(this.context.ctx);
        }
    }
}