andrewjakubowicz / vue-graphviz

component for visualising nodes

graphviz

Try it here

https://andrewjakubowicz.github.io/vue-graphViz

Use the toolbar on the right to draw out your graph. You can double click to create nodes easily. Multiple objects can be selected and manipulated at once through the selection tool (second from top in toolbar) Typical keyboard shortcuts are supported

networkVizJs

This component is built using the networkVizJS API See: Project Link

Very quick rough prototype of structure mapper.

I haven't isolated the component, and have instead left it in an example.

The component has dependencies which are in the static folder (images).

Otherwise the component reacts to the nodes passed in. If the user clicks save, an event is emitted with the structure saved as a string. The SVG node is also passed in that event.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

vue-graphviz's Issues

add new node to graph

could you add an icon to the toolbar so we can also create new nodes?

Broken on Safari - let

let is a reserver keyword

Fix that error please.

Edge drawing feedback doesn't start at the correct position

Issue description

When you are drawing the edges, the feedback doesn't always line up correctly.

Steps to reproduce the issue

1. Place the mouse in edge drawing mode.
2. Start drawing an edge.

What's the expected result?

The feedback line should line up with the initial node.

What's the actual result?

Currently the line doesn't line up and floats in the middle of the canvas.

Clicking the editable nodes causes pipes to stack up.

Issue description

If you click on editable nodes multiple times, the observables don't cancel and many cursors are added.

Steps to reproduce the issue

1. Create an editable node.
2. Spam click on the editable node

What's the expected result?

Multiple pipes shouldn't appear.

What's the actual result?

The node will have many pipes: '|' of previous cursors.

Central storage of props outside of the component.

If the props being passed in aren't stored centrally, then the mutations webcola adds to them will be lost.

However the save does keep x and y co-ordinates.

The overhead of recreating the graph every time the props change may become
very slow.

Edge Hover Menu

• New hover menu as a vue component for edges.
• Will open up on top of mouseOver position
• Change:
  • Colour
  • Stroke
  • Weight

Safari can't find variable: levelgraph

This is an error message I get when I try to run it in Safari:

[Vue warn]: Error in mounted hook: "ReferenceError: Can't find variable: levelgraph"

found in

---> at /Users/monika/vue-graphViz/src/graphViz.vue

Save-As for .dot files would be great too.

You have save as SVG and save as pic, but .dot format would be good too, even if it isn't perfect WYSIWYG

Jumping Nodes

Aligned fixed nodes that have been dragged, upon dragging another node, will jump partway between original position and new position

1. Create two nodes and align them
2. create a third node elsewhere in page
3. drag the aligned nodes
4. drag the unconnected node
   the two connected nodes will now jump back partway between their old and new positions

Standalone App

• Reduce App size
• Put save menu in modal box
• Remove import prob diagram from standalone app - or maybe import pmath into standalone app
• Save graph image
• Save graph structure
• Import graph structure
• Move build folder to docs instead of dist and host app from Master/docs branch on github

Should ES6 be transpiled down or leave it?

Currently the component only works on Chrome because of ES6 syntax. Safari and Firefox both don't work. However after transpilation the component works on all modern browsers.

Should I add transpilation or let importing projects handle it?

Add node deletion in props being handled correctly

Currently nodes can be added to the props.
However nodes being removed may cause a problem.

Broken on Firefox - levelgraph undefined

Due to another issue.