@gravity-ui/graph/build/store/group/Group.js

Modern graph editor component

import { computed, signal } from "@preact/signals-core";
import { Group } from "../../components/canvas/groups";
import { ESelectionStrategy } from "../../services/selection/types";
export class GroupState {
    constructor(store, state, groupSelectionBucket) {
        this.store = store;
        this.groupSelectionBucket = groupSelectionBucket;
        this.$state = signal({
            id: "",
            selected: false,
            rect: {
                x: 0,
                y: 0,
                width: 0,
                height: 0,
            },
            component: Group,
        });
        /**
         * Computed signal that reactively determines if this group is selected
         * by checking if its ID exists in the selection bucket
         */
        this.$selected = computed(() => {
            return this.groupSelectionBucket.isSelected(this.id);
        });
        this.$state.value = state;
    }
    get id() {
        return this.$state.value.id;
    }
    updateGroup(group) {
        this.$state.value = {
            ...this.$state.value,
            ...group,
        };
    }
    setSelection(selected, strategy = ESelectionStrategy.REPLACE) {
        this.store.updateGroupsSelection([this.id], selected, strategy);
    }
    asTGroup() {
        return this.$state.value;
    }
    static fromTGroup(store, group) {
        return new GroupState(store, group, store.groupSelectionBucket);
    }
}