@gravity-ui/graph/build/store/settings.js

Modern graph editor component

import { computed, signal } from "@preact/signals-core";
import cloneDeep from "lodash/cloneDeep";
/** @deprecated Use ECanDrag and setting canDrag instead */
export var ECanChangeBlockGeometry;
(function (ECanChangeBlockGeometry) {
    ECanChangeBlockGeometry["ALL"] = "all";
    ECanChangeBlockGeometry["ONLY_SELECTED"] = "onlySelected";
    ECanChangeBlockGeometry["NONE"] = "none";
})(ECanChangeBlockGeometry || (ECanChangeBlockGeometry = {}));
export var ECanDrag;
(function (ECanDrag) {
    /** Any component can be dragged. If component is in selection, all selected draggable components move together */
    ECanDrag["ALL"] = "all";
    /** Only selected components can be dragged */
    ECanDrag["ONLY_SELECTED"] = "onlySelected";
    /** Drag is disabled for all components (except manual drag via startDrag) */
    ECanDrag["NONE"] = "none";
})(ECanDrag || (ECanDrag = {}));
export const DefaultSettings = {
    canDragCamera: true,
    canZoomCamera: true,
    canDuplicateBlocks: false,
    canDrag: ECanDrag.ALL,
    dragThreshold: 5,
    canCreateNewConnections: false,
    showConnectionArrows: true,
    scaleFontSize: 1,
    useBezierConnections: true,
    bezierConnectionDirection: "horizontal",
    useBlocksAnchors: true,
    connectivityComponentOnClickRaise: true,
    showConnectionLabels: false,
    blockComponents: {},
};
export class GraphEditorSettings {
    constructor(rootStore) {
        this.rootStore = rootStore;
        this.$settings = signal(DefaultSettings);
        this.$blockComponents = computed(() => {
            return this.$settings.value.blockComponents;
        });
        this.$background = computed(() => {
            return this.$settings.value.background;
        });
        this.$connection = computed(() => {
            return this.$settings.value.connection;
        });
        this.$connectionsSettings = computed(() => {
            return {
                useBezierConnections: this.$settings.value.useBezierConnections,
                showConnectionLabels: this.$settings.value.showConnectionLabels,
                canCreateNewConnections: this.$settings.value.canCreateNewConnections,
                showConnectionArrows: this.$settings.value.showConnectionArrows,
                bezierConnectionDirection: this.$settings.value.bezierConnectionDirection,
            };
        });
        /**
         * Computed canDrag setting with backward compatibility.
         * Priority: canChangeBlockGeometry (deprecated, for existing users) > canDrag > default ALL
         */
        this.$canDrag = computed(() => {
            const settings = this.$settings.value;
            // 1. If deprecated canChangeBlockGeometry is set, use it (don't break existing users)
            // Both enums have the same string values, so we can cast directly
            if (settings.canChangeBlockGeometry !== undefined) {
                return settings.canChangeBlockGeometry;
            }
            // 2. Use canDrag if explicitly set (new users)
            if (settings.canDrag !== undefined) {
                return settings.canDrag;
            }
            // 3. Default to ALL if neither is set
            return ECanDrag.ALL;
        });
        /**
         * Drag threshold in pixels. Default: 3
         */
        this.$dragThreshold = computed(() => {
            return this.$settings.value.dragThreshold ?? 3;
        });
    }
    setupSettings(config) {
        this.$settings.value = Object.assign({}, this.$settings.value, config);
    }
    setConfigFlag(flagPath, value) {
        if (typeof this.$settings.value[flagPath] === typeof value) {
            this.$settings.value[flagPath] = value;
        }
    }
    getConfigFlag(flagPath) {
        return this.$settings.value[flagPath];
    }
    toJSON() {
        return cloneDeep(this.$settings.toJSON());
    }
    get asConfig() {
        return this.toJSON();
    }
    reset() {
        this.setupSettings(DefaultSettings);
    }
}