標記的自定義 Vaadin 組件未添加到 MainView 布局

Question

我正在嘗試將我的自定義 vis 組件添加到 MainView VerticalLayout。 但它呈現在布局之上，並且布局本身包含一個空的組件標簽。

自定義組件代碼

在這里，我將我的組件標記為“div”

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

    public VisJs(List<VisJsEdge> edges, List<VisJsNode> nodes) throws JsonProcessingException {
        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)", this, jsonEdges, jsonNodes);
    }
}

visjs-test.js：

在這里，我正在填充未來網絡的節點和邊緣並嘗試渲染它

import {DataSet, Network} from "vis";

class VisJsTest {
    init(element, edges, nodes) {
        this.element = element;

        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);

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

渲染 HTML

<div id="outlet">
   <!-- Network is here, but not must be -->
   <div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
      <canvas style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;" width="1260" height="563"></canvas>
   </div>
   <flow-container-root-2521314 id="ROOT-2521314" style="">
      <vaadin-vertical-layout theme="padding spacing" id="mainview" style="width: 100%;">
         ...
         <vaadin-button tabindex="0" role="button">Add node</vaadin-button>
         <vaadin-horizontal-layout theme="spacing">
            <vaadin-upload target="VAADIN/dynamic/resource/3/c968ce30-4fc1-4e36-8d06-ddba9ecfbfd1/upload"></vaadin-upload>
            <vaadin-button disabled="" tabindex="-1" aria-disabled="true" role="button">Load data to XML</vaadin-button>
         </vaadin-horizontal-layout>
         ... 
         <div></div> <!-- Network must be here -->
         ...
      </vaadin-vertical-layout>
   </flow-container-root-2521314>
</div>

Answer 1

發生這種情況是因為您的組件沒有設置元素的“id”。 在您的情況下，意外地有其他 id=outlet 的 div，以及您的 JavaScript document.getElementById("outlet"); 找到它並將其用作構建網絡的元素。

我會這樣做

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

    public VisJs(List<VisJsEdge> edges, List<VisJsNode> nodes) throws JsonProcessingException {
        String id=randomId(10);
        setId();
        ...
        getElement().executeJs("window.initThree($0, $1, $2)", this, jsonEdges, jsonNodes, id);
    }
    
    private String randomId(int chars) {
        int limit = (10 * chars) - 1;
        String key = "" + rand.nextInt(limit);
        key = String.format("%" + chars + "s", key).replace(' ', '0');
        return "vis-" + key;
    }

並且自然地更新您設置為 window 的initThree window以使用該id參數。

您需要為每個組件實例提供唯一的 ID。 這樣您就可以在同一個視圖上創建多個組件。 否則新實例會毀掉舊實例。