vue 3 composition api support?

[hi-reeve]

hello, i'm trying to use this with the vue 3 composition api support, which doesn't have the this keyword. is there any way to implement this? thankyou

[hi-reeve]

following the composition api support, it does work with this method

App.vue

<script setup lang="ts">
import { ref, shallowRef } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import * as Vue from "vue";
import Drawflow from "drawflow";
import "drawflow/dist/drawflow.min.css";
import NodeClick from "./components/NodeClick.vue";
import { NGrid, NGridItem, NConfigProvider } from "naive-ui";

const drawFlowElm = ref<HTMLDivElement>();
const editor = shallowRef<Drawflow>();
const data = {};

const addNewQuestion = () => {
    editor.value?.addNode(
        "Name",
        1,
        1,
        0,
        0,
        "class",
        data,
        "NodeClick",
        "vue"
    );
};

const exportData = () => {
    console.log(editor.value?.export());
};
onMounted(() => {
    drawFlowElm.value = document.getElementById("drawflow") as HTMLDivElement;
    // @ts-ignore
    editor.value = new Drawflow(drawFlowElm.value, Vue);
    editor.value.draggable_inputs = true;
    editor.value.start();

    const props = {};
    const options = {};
    editor.value.registerNode("NodeClick", NodeClick, props, options);
    editor.value.addNode(
        "Name",
        1,
        1,
        150,
        150,
        "class",
        data,
        "NodeClick",
        "vue"
    );
});
</script>

<template>
    <n-config-provider
        :theme-overrides="{ common: { fontWeightStrong: '600' } }"
    >
        <n-grid x-gap="8" cols="1 900:2">
            <n-grid-item>
                <div class="drawflow-control">
                    <button @click="addNewQuestion">Tambah Pertanyaan</button>
                    <button @click="exportData">Export</button>
                </div>
            </n-grid-item>
            <n-grid-item>
                <div id="drawflow"></div>
            </n-grid-item>
        </n-grid>
    </n-config-provider>
</template>

NodeClick.vue

<script setup lang="ts">
import { defineProps, ref } from "vue";
</script>

<template>
    <div>asdasd</div>
</template>

the problem now is, the node can't be dragged vertically only works on drag horizontally. and also when i try to drag the connection, an error printed on the console.

[jerosoler]

Could it be that the style is missing?

<style scoped>
#drawflow {
  width: 100%;
  height: 500px;
  border: 1px solid red;
  text-align: initial;
}
</style>

[hi-reeve]

Could it be that the style is missing?

<style scoped>
#drawflow {
  width: 100%;
  height: 500px;
  border: 1px solid red;
  text-align: initial;
}
</style>

nope. i think it got something to do with the this keyword again

[jerosoler]

I have created a small test and it works without problem.

App.vue

<template>
  <drawflow/>
</template>

<script>

import drawflow from './components/drawflow.vue'

export default {
  name: 'App',
  components: {
    drawflow
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

components/drawflow.vue

<template>
    <div id="drawflow"></div>
</template>
<script>
/*eslint-disable */
import * as Vue from 'vue'
import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'
import { onMounted, shallowRef } from 'vue'
import NodeClick from './NodeClick.vue'

export default {
  name: 'drawflow',
  setup() {

   const editor = shallowRef({})

   onMounted(() => {
       const id = document.getElementById("drawflow");
       editor.value = new Drawflow(id, Vue);
       editor.value.start();

       const props = { name: "hey"};
       const options = {};
       editor.value.registerNode('NodeClick', NodeClick, props, options);

       editor.value.addNode('Name', 0, 1, 150, 300, 'Class', {}, 'NodeClick', 'vue');
       editor.value.addNode('Name', 1, 1, 250, 300, 'Class', {}, 'NodeClick', 'vue');

  })
  }

}
/*eslint-enable */
</script>
<style scoped>
#drawflow {
  width: 100%;
  height: 500px;
  border: 1px solid red;
  text-align: initial;
}
</style>

I see that if I remove the property of the "height" automatically I get the error that is arising.

You can try putting the css code.

[hi-reeve]

ah i see, so its because height? yesterday i use 100vh on the height but it's also error. so i'll try to use px this time. thankyou !

edit : might as well make the DrawFlow constructor can accept only 1 arguments got a warning on typescript because of this

[jerosoler]

A fixed div height is required.

Maybe I can solve the typescript problem. Liberia uses vue's "createApp and h" methods.

With:

import { onMounted, shallowRef, createApp, h } from 'vue'

And:

 const Vue = { createApp, version: 3, h };
...
editor.value = new Drawflow(id, Vue);

[hi-reeve]

A fixed div height is required.

Maybe I can solve the typescript problem. Liberia uses vue's "createApp and h" methods.

With:

import { onMounted, shallowRef, createApp, h } from 'vue'

And:

 const Vue = { createApp, version: 3, h };
...
editor.value = new Drawflow(id, Vue);

thankyou so much for the help! also this is a great library exists for vue, i hope you have more time to maintain this library :) and also i'm waiting for #48 to be implemented :D

[jerosoler]

For #48 auto connect nodes view: https://github.com/jerosoler/Drawflow/issues/216 and https://github.com/jerosoler/Drawflow/issues/255

[hi-reeve]

For #48 auto connect nodes view: #216 and #255

ah sorry my bad i mean #256