Skip to content

addConnection not working #922

@Samandar0021305

Description

@Samandar0021305

Hi, for some reason the addConnection method is not working in vue 2?
can you help ? @jerosoler
code:

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions