0.0.1 • Published 10 months ago
diagrams-drawing v0.0.1
vue-diagrams
Diagram component for vue.js, inspired by react-diagrams
Generated using vue-cli-template-library.
Installation
npm install vue-diagrams
vue-diagrams can be used as a module in both CommonJS and ES modular environments.
When in non-modular environment, vue-diagrams will register all the components to vue by itself.
ES6
//
// You can register a component manually
//
import { Diagram } from 'vue-diagrams';
export default {
...
components: {
Diagram
},
...
};
//
// or register the whole module with vue
//
import ModuleLibrary from 'vue-diagrams';
// Install this library
Vue.use(ModuleLibrary);
CommonJS
//
// You can register a component manually
//
var Vue = require('vue');
var ModuleLibrary = require('vue-diagrams');
var YourComponent = Vue.extend({
...
components: {
'diagram': ModuleLibrary.Diagram
},
...
});
//
// or register the whole module with vue
//
var Vue = require('vue');
var ModuleLibrary = require('vue-diagrams');
// Install this library
Vue.use(ModuleLibrary);
Browser
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-diagrams/dist/vue-diagrams.min.js"></script>
<!-- Components are registered globally -->
After that, you can use it in your Vue components:
<template>
<diagram :model="model"></diagram>
</template>
<script>
<script>
export default {
data() {
const diagramModel = new DiagramModel();
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
};
}
};
</script>
Changelog
See the GitHub release history.
Contributing
See CONTRIBUTING.md.
0.0.1
10 months ago