Not able to make it work on Vue3

[platput]

Hello, I have been trying to make it work on Vue3 without any luck. I feel like I am stuck on something very trivial. Any help would be appreciated. Here is the code. Nothing appears in the ui when I run this except for the background color from the card. There are no errors as well.

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-card theme="dark" min-height="760">
          <v-card-title>Shapes</v-card-title>
          <v-card-text>
            <div id="canvas"></div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Drawflow from "drawflow";
import { h, getCurrentInstance, render } from "vue";
// eslint-disable-next-line no-unused-vars
import styleDrawflow from "drawflow/dist/drawflow.min.css";
const Vue = { version: 3, h, render };

export default {
  name: "CreateFlows",
  data() {
    return {
      shapes: {},
      components: [],
      editor: null,
      dataflowData: {
        drawflow: {
          Home: {
            data: {},
          },
          Other: {
            data: {
              16: {
                id: 16,
                name: "facebook",
                data: {},
                class: "facebook",
                html: "Facebook Message",
                inputs: {},
                outputs: {
                  output_1: {
                    connections: [
                      {
                        node: "17",
                        output: "input_1",
                      },
                    ],
                  },
                },
                pos_x: 226,
                pos_y: 138,
              },
              17: {
                id: 17,
                name: "log",
                data: {},
                class: "log",
                html: "Save log file",
                inputs: {
                  input_1: {
                    connections: [
                      {
                        node: "16",
                        input: "output_1",
                      },
                    ],
                  },
                },
                outputs: {},
                pos_x: 690,
                pos_y: 129,
              },
            },
          },
        },
      },
    };
  },
  mounted() {
    const id = document.getElementById("canvas");
    const internalInstance = getCurrentInstance();
    this.editor = new Drawflow(
      id,
      Vue,
      internalInstance.appContext.app._context
    );
    this.editor.start();
    this.editor.import(this.dataflowData);
  },
  methods: {},
};
</script>

<style>
@import "drawflow/dist/drawflow.min.css";
#square {
  background: lightblue;
  width: 100px;
  height: 100px;
}

#triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid lightblue;
}
</style>

[jerosoler]

What appears in the element inspector?

You can see an example of vue3.

https://github.com/jerosoler/drawflow-vue3-example

[platput]

Thanks for replying, I tried to figure out the issue in my code by looking at that example as well. But the result was the same. Please see the attached screenshot.

[jerosoler]

I see that it matters. But in the "Home" there is no data. All data is in "Other".

Try:

editor.changeModule('Other');

Try if not to add a node with "addNode".

[platput]

Thanks. I tried adding the node with addNode. The item appeared in the element inspector. But it was not viewable in the browser window. Here is my current code inside onMounted:

onMounted(() => {
      const id = document.getElementById("canvas");
      editor.value = new Drawflow(
        id,
        Vue,
        internalInstance.appContext.app._context
      );
      editor.value.start();
      editor.value.registerNode("NodeOne", NodeOne, {}, {});
      editor.value.addNode(
        NodeOne,
        1,
        2,
        100,
        100,
        "node-one",
        {},
        "NodeOne",
        "vue"
      );
    });

Here is the screenshot of my element tree:

[jerosoler]

If it is not displayed, it is because you have not defined the height and width in the canvas div. Try adding in the style.

  #canvas { 
    position: relative;
    text-align:initial;
    width: 100%;
    height: 800px;
    border: 1px solid red;
  }

[platput]

Thanks a lot, that was the issue.