Skip to content
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.

Sign up for GitHub

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

Jump to bottom

The readme example throws errors #6

Open
ajthinking opened this issue Apr 18, 2019 · 6 comments · May be fixed by #13
Open

The readme example throws errors #6

ajthinking opened this issue Apr 18, 2019 · 6 comments · May be fixed by #13

Comments

@ajthinking
Copy link

ajthinking commented Apr 18, 2019 •
edited

The example in the readme:

<template>
  <diagram :model="model"></diagram>
</template>
<script>
import { Diagram } from 'vue-diagrams';

export default {
  data() {
    const diagramModel = new Diagram.Model();

    const node1 = diagramModel.addNode("test2", 300, 200);
    const inPort = node1.addInPort("test");

    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
    const node2OutPort = node2.addOutPort("testOut");
    node2.addOutPort("testOut2");
    node2.color = "#00cc66";

    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
    const node3OutPort = node3.addOutPort("testOut3");
    node3.color = "#cc6600";

    diagramModel.addLink(node2OutPort, inPort);
    diagramModel.addLink(node3OutPort, inPort);

    return {
      model: diagramModel
    };
  },

  components: {
    Diagram
  },
};
</script>

Throws 4 x

Error: <path> attribute d: Expected number, "MNaN,NaN CNaN,NaN…".

at app.js:60222

It is triggered by diagramModel.addLink(a,b);

Google Chrome | 73.0.3683.86
"vue": "^2.5.17",
@gwenaelp
Copy link
Owner

Hi @ajthinking,

Thanks for the issue. I was not able to take time to solve a lot of issues on this library, but I'm considering making a big update to solve some problems that library have and add more features soon. I'll keep you posted!

Apart of this problem, are you able to do what you want with the library?

@jsuwala
Copy link

jsuwala commented Apr 18, 2019

For me, serialization and deserialization functions are very much needed to allow for the diagram to be persisted and restored.

@ajthinking
Copy link
Author

Got, it thanks for the heads up! I love react-diagrams so really excited about this :)
For my current project it is for visualizing database schemas. But it's good-to-have-feature only so might wait a bit.

@gwenaelp
Copy link
Owner

@jsuwala serialization and deserialization are already working on vue-diagrams. You can have a look at the storybook!

@jsuwala
Copy link

jsuwala commented Apr 24, 2019

@gwenaelp - thanks! I missed those storybooks...

TonyMasse added a commit to TonyMasse/vue-diagrams that referenced this issue Dec 8, 2020
@TonyMasse
fix(diagramlink): populate positionFrom and positionTo
46bb63e 
with `{x:0, y:0}` in DiagramModel.addLink(). To prevent error message when new link is created. As the link's curve cannot otherwise be drawn properly (as no `x` nor `y` yet defined for `positionFrom` and `positionTo`) until the first call to `updateLinksPositions()`.

Close gwenaelp#6
@TonyMasse
Copy link

TonyMasse commented Dec 9, 2020 •
edited

@gwenaelp I fixed the bug causing the error message about attribute d.
Expect PR shortly.
You only have a Master branch (as in, no Dev branch), so submitting my PR to master.

TonyMasse added a commit to TonyMasse/vue-diagrams that referenced this issue Dec 9, 2020
@TonyMasse
fix(diagramlink): populate positionFrom and positionTo
a96190d 
with `{x:0, y:0}` in DiagramModel.addLink(). To prevent error message when new link is created. As the link's curve cannot otherwise be drawn properly (as no `x` nor `y` yet defined for `positionFrom` and `positionTo`) until the first call to `updateLinksPositions()`.

Close gwenaelp#6
This was referenced Dec 9, 2020
Open
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(diagramlink): populate positionFrom and positionTo TonyMasse/vue-diagrams
4 participants
@jsuwala @ajthinking @gwenaelp @TonyMasse