<template>
<div class="drawflow-wrapper">
<div class="drawflow-wrapper-left">
<ul class="drawflow-wrapper-left-list">
<li v-for="(item, index) in listDataType" :key="index">
<h3 class="node">{{ item.name }}</h3>
</li>
</ul>
</div>
<div id="drawflow" ref="drawflow"></div>
</div>
</template>
<script>
import { getDataTypesList } from '@/api/project';
import Drawflow from 'drawflow';
import 'drawflow/dist/drawflow.min.css';
export default {
data() {
return {
editor: null,
listDataType: [],
};
},
mounted() {
this.editor = new Drawflow(this.$refs.drawflow);
// const currentDataType = this.$store.state?.currProject.parent;
this.editor.start();
this.editor.addNode(
'Image',
1,
1,
100,
100,
'image',
{},
`<div id='image'> Image</div>`
);
this.editor.addNode(
'DataType',
2,
2,
400,
200,
'output',
{},
`<div id='output'>Salom</div>`
);
this.editor.addNode(
'DataType',
1,
1,
900,
150,
'node',
{},
`<div>Output</div>`
);
console.log(this.editor);
this.editor.addConnection(2, 1, 'output', 'image');
},
created() {
this.toFetchDataType();
},
methods: {
async toFetchDataType() {
try {
this.listDataType = await getDataTypesList();
} catch (error) {
this.$message.error(error.message);
}
},
},
};
</script>
<style scoped lang="scss">
@import '@/styles/mixins';
#drawflow {
width: 100%;
height: 600px;
border: 1px solid #ddd;
}
.example-class {
background-color: #ffcc00;
border: 1px solid #000;
padding: 10px;
border-radius: 4px;
text-align: center;
}
.drawflow-wrapper {
display: flex;
&-left {
width: 200px;
&-list {
width: 100%;
li {
display: block;
width: 100%;
}
}
}
}
</style>
Hi, for some reason the addConnection method is not working in vue 2?
can you help ? @jerosoler
code: