Skip to content

addConnection not working #922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Samandar0021305 opened this issue Jan 21, 2025 · 2 comments
Open

addConnection not working #922

Samandar0021305 opened this issue Jan 21, 2025 · 2 comments

Comments

@Samandar0021305
Copy link

Samandar0021305 commented Jan 21, 2025

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>

@jerosoler
Copy link
Owner

View example the method add connection.
The syntax and parameters is not written correctly

@Samandar0021305
Copy link
Author

@jerosoler thank you very much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants