解决 Vaadin 自定义组件未正确添加到布局的问题

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.ObjectWriter;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.html.Div;

import java.util.List;
import java.util.Random;

@JsModule("./visjs-test.js")
@NpmPackage(value = "vis", version = "0.110.0")
@Tag("div")
public class VisJs extends Composite<Div> {

    private static final Random rand = new Random();

    public VisJs(List<VisJsEdge> edges, List<VisJsNode> nodes) throws JsonProcessingException {
        String id = randomId(10);
        setId(id);

        ObjectWriter owForEdges = new ObjectMapper().writer().withDefaultPrettyPrinter();
        ObjectWriter owForNodes = new ObjectMapper().writer().withDefaultPrettyPrinter();

        String jsonEdges = owForEdges.writeValueAsString(edges);
        String jsonNodes = owForNodes.writeValueAsString(nodes);

        getElement().executeJs("window.initThree($0, $1, $2, $3)", this, jsonEdges, jsonNodes, id);
    }

    private String randomId(int chars) {
        int limit = (int) (Math.pow(10, chars) - 1);
        String key = "" + rand.nextInt(limit);
        key = String.format("%" + chars + "s", key).replace(' ', '0');
        return "vis-" + key;
    }
}

import {DataSet, Network} from "vis";

class VisJsTest {
    init(element, edges, nodes, id) {
        this.element = element;
        this.containerId = id; // Store the ID

        var loadedNodes = JSON.parse(nodes);

        var _this = this;
        var step;
        for (step = 0; step < loadedNodes.length; step++) {
            loadedNodes[step] = this.fillNode(loadedNodes[step]);
        }
        this.nodes = new DataSet(loadedNodes);

        var loadedEdges = JSON.parse(edges);
        for (step = 0; step < loadedEdges.length; step++) {
            loadedEdges[step] = this.fillEdge(loadedEdges[step]);
        }
        this.edges = new DataSet(loadedEdges);

        // Use the stored ID to locate the container
        this.container = document.getElementById(this.containerId);

        this.data = {
            nodes: this.nodes,
            edges: this.edges,
        };
        var options = {};
        this.network = new Network(this.container, this.data, options);
    }
}