使用Drawflow库创建节点但它们不可见

Question

我正在尝试使用令人惊叹的 Drawflow 库（Javascript）：

这是我的代码：

<head>
    {% load static %}
    <link rel="stylesheet" href="{% static 'drawflow/src/drawflow.css' %}">
</head>

<body>

    <div id="drawflow"></div>

    <script type='module'>
        // The minified version is build as an UMD module, so it cannot be imported
        // It should be rebuild eventually.
        // https://stackoverflow.com/questions/75514648/uncaught-syntaxerror-the-requested-module-does-not-provide-an-export-named-dra
        import Drawflow from "{% static 'drawflow/src/drawflow.js' %}";
        import sheet from "{% static 'drawflow/src/drawflow.css' %}" assert { type: 'css'};
        import { h, getCurrentInstance, render } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        const Vue = { version: 3, h, render };

        const container = document.getElementById("drawflow");
        var editor = new Drawflow(container);

        editor.reroute = true;
        editor.editor_mode = 'edit';
        editor.start();
        editor.addModule('nameNewModule');
        
        const nodeData = {
          id: 'node-1',
          name: 'My Node',
          module: 'nameNewModule',
          x: 500,
          y: 100,
          class: '',
          html: function() {
            return '<div>' + this.name + '</div>';
          } ,
          inputs: {
            input_1: {
              label: 'Input 1',
            },
          },
          outputs: {
            output_1: {
              label: 'Output 1',
            },
          },
          data: {
            command: 'Run command',
          },
        };

        editor.addNode(nodeData.module, 
            Object.keys(nodeData.inputs).length,
            Object.keys(nodeData.outputs).length,
            nodeData.x, nodeData.y,
            nodeData.class, nodeData.data, nodeData.html());
    </script>

</body>

但是，当我运行这个（使用 Django 服务器）时，无论是在服务器上还是在控制台中，我都没有收到任何错误，并且我检查了库已加载，但我没有看到任何内容。

但是，我知道元素已正确创建，正如我们在这里看到的：

如果我关闭元素上的属性“position:absolute”，我会得到这样的结果：

现在节点是可见的，但我不能用它做太多事情，而且它的几何形状错误。我无法拖动它或做任何事情，而且它太大而且位置错误。

我真的不明白发生了什么事。当进行 GitHub 存储库中链接的实时演示时，它可以工作，所以我不认为这是浏览器问题（我尝试使用 Chrome、Opera 和 Firefox）。

我什至尝试从 GitHub 存储库获取实时演示的源代码，但它并没有真正起作用：

如果有人可以提供帮助，或者看看他们是否可以使用相同的代码重现此问题，谢谢。

编辑：经过进一步调查，我通过关闭父绘制流类中的属性“display：flex”和“overflow：hidden”来使其工作。但我不明白为什么我必须这样做，我可以让它工作而不必关闭它。为什么它在现场演示中效果很好，但在我身上却效果不佳？

编辑 2：我设法通过在

<div class='wrapper'>

周围添加

<div id='drawflow'>

并使用现场演示示例中的 beautiful.css 样式表来完成这项工作。看起来包装器设置了大小，这在绘制流类中没有完成。

Answer 1

0
投票

难道你缺少/beautiful.css

使用Drawflow库创建节点但它们不可见

问题描述投票：0回答：1

1个回答

最新问题

使用Drawflow库创建节点但它们不可见

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1