4 |
5 |
6 |
7 |
8 | Vue Vis-Network integration example
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Contributions are **welcome** and will be fully **credited**.
4 |
5 | We accept contributions via Pull Requests on [Github](https://github.com/r3code/).
6 |
7 |
8 | ## Pull Requests
9 |
10 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
11 |
12 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
13 |
14 | - **Create feature branches** - Don't ask us to pull from your master branch.
15 |
16 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
17 |
18 | **Happy coding**!
19 |
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | # Vue Vis-Network integration example
2 |
3 | > An example project integrating Vue and vis-network
4 |
5 | ## Project setup
6 | ``` bash
7 | # install vue-vis-network local module
8 | cd ..
9 | npm link
10 | # prepare example
11 | cd example
12 | # install the example dependencies
13 | npm install
14 | # add local vue-vis-network module to node_modules
15 | npm link vue-vis-network
16 | ```
17 |
18 | ### Live Demo
19 | ```
20 | npm run serve
21 | ```
22 |
23 | Go to to see an example running
24 |
25 | NOTE: If you make changes to the library you should run `npm run build` again in the root folder to rebuild vue-vis-network package.
26 | The dev server should detect modification and reload the demo
27 |
28 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 | All notable changes to this project will be documented in this file.
3 |
4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6 |
7 | ## [Unreleased]
8 | NA
9 |
10 | ## [1.0.2] - 2020-03-11
11 | ### Changed
12 | - Build scripts replaced by `vue-cli-service` to build the dist
13 | - Code style fixed
14 |
15 | ## [1.0.1] - 2020-02-20
16 | ### Added
17 | - Published at https://www.npmjs.com/package/vue-vis-network
18 |
19 | ## [1.0.0] - 2019-19-09
20 | ### Added
21 | - All major functionality added. First public release
22 |
23 | ## [0.0.3] - 2019-09-04
24 | ### Added
25 | - Added an example of use rewritten from scratch
26 |
27 | ### Removed
28 | - Removed old complicated example
29 |
30 | ## [0.0.2] - 2019-09-04
31 | ### Changed
32 | - Dependency updated vis-network up to 5.3.1
33 |
34 | ## [0.0.1] - 2019-09-02
35 | ### Added
36 | - Support vis-network
37 | - Added CHANGELOG.md
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Dmitriy S. Sinyavskiy
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-vis-network-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "vue": "^2.6.11",
12 | "vue-vis-network": "1.0.2"
13 | },
14 | "devDependencies": {
15 | "@vue/cli-plugin-babel": "^3.12.1",
16 | "@vue/cli-plugin-eslint": "^3.12.1",
17 | "@vue/cli-service": "^3.12.1",
18 | "babel-eslint": "^10.1.0",
19 | "eslint": "^5.16.0",
20 | "eslint-plugin-html": "^6.0.0",
21 | "eslint-plugin-vue": "^5.0.0",
22 | "vue-template-compiler": "^2.6.11"
23 | },
24 | "eslintConfig": {
25 | "root": true,
26 | "env": {
27 | "node": true
28 | },
29 | "extends": [
30 | "plugin:vue/essential",
31 | "eslint:recommended"
32 | ],
33 | "rules": {},
34 | "parserOptions": {
35 | "parser": "babel-eslint"
36 | }
37 | },
38 | "postcss": {
39 | "plugins": {
40 | "autoprefixer": {}
41 | }
42 | },
43 | "browserslist": [
44 | "> 1%",
45 | "last 2 versions"
46 | ]
47 | }
48 |
--------------------------------------------------------------------------------
/example/public/device.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | import { DataSet, DataView } from "vis-network";
2 |
3 | const arrayDiff = (arr1, arr2) => arr1.filter(x => arr2.indexOf(x) === -1);
4 |
5 | const mountVisData = (vm, propName) => {
6 | let data = vm[propName];
7 | // If data is DataSet or DataView we return early without attaching our own events
8 | if (!(vm[propName] instanceof DataSet || vm[propName] instanceof DataView)) {
9 | data = new DataSet(vm[propName]);
10 | // Rethrow all events
11 | data.on("*", (event, properties, senderId) =>
12 | vm.$emit(`${propName}-${event}`, { event, properties, senderId })
13 | );
14 | // We attach deep watcher on the prop to propagate changes in the DataSet
15 | const callback = value => {
16 | if (Array.isArray(value)) {
17 | const newIds = new DataSet(value).getIds();
18 | const diff = arrayDiff(vm.visData[propName].getIds(), newIds);
19 | vm.visData[propName].update(value);
20 | vm.visData[propName].remove(diff);
21 | }
22 | };
23 |
24 | vm.$watch(propName, callback, {
25 | deep: true
26 | });
27 | }
28 |
29 | // Emitting DataSets back
30 | vm.$emit(`${propName}-mounted`, data);
31 |
32 | return data;
33 | };
34 |
35 | const translateEvent = event => {
36 | return event.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
37 | };
38 |
39 | export { arrayDiff, mountVisData, translateEvent };
40 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-vis-network",
3 | "version": "1.0.2",
4 | "description": "Vue2 component to integrate with vis-network",
5 | "main": "dist/vueVisNetwork.umd.js",
6 | "module": "dist/vueVisNetwork.common.js",
7 | "directories": {
8 | "example": "example"
9 | },
10 | "scripts": {
11 | "serve": "vue-cli-service serve --open",
12 | "build": "vue-cli-service build",
13 | "build:bundle": "vue-cli-service build --target lib --name vueVisNetwork src/main.js",
14 | "test:unit": "vue-cli-service test:unit",
15 | "lint": "vue-cli-service lint",
16 | "beforePublish": "npm run lint && npm run build"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/r3code/vue-vis-network.git"
21 | },
22 | "files": [
23 | "dist/",
24 | "src/"
25 | ],
26 | "author": "Dmitriy S. Sinyavskiy ",
27 | "license": "MIT",
28 | "keywords": [
29 | "vue",
30 | "vis",
31 | "visjs",
32 | "vis-network"
33 | ],
34 | "dependencies": {
35 | "vis-data": "^6.5.0",
36 | "vis-network": "^7.4.0"
37 | },
38 | "peerDependencies": {
39 | "vue": "~2.x",
40 | "vue-vis-network": "^1.0.2"
41 | },
42 | "devDependencies": {
43 | "@vue/cli-plugin-babel": "~4.2.0",
44 | "@vue/cli-plugin-eslint": "~4.2.0",
45 | "@vue/cli-plugin-unit-jest": "~4.2.0",
46 | "@vue/cli-service": "~4.2.0",
47 | "@vue/eslint-config-prettier": "^6.0.0",
48 | "@vue/test-utils": "1.0.0-beta.31",
49 | "babel-eslint": "^10.0.3",
50 | "eslint": "^6.7.2",
51 | "eslint-plugin-prettier": "^3.1.1",
52 | "eslint-plugin-vue": "^6.1.2",
53 | "prettier": "^1.19.1",
54 | "vue": "^2.6.11",
55 | "vue-template-compiler": "^2.6.11"
56 | },
57 | "bugs": {
58 | "url": "https://github.com/r3code/vue-vis-network/issues"
59 | },
60 | "homepage": "https://github.com/r3code/vue-vis-network#readme"
61 | }
62 |
--------------------------------------------------------------------------------
/CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Code of Conduct
2 |
3 | As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
4 |
5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
6 |
7 | Examples of unacceptable behavior by participants include:
8 |
9 | * The use of sexualized language or imagery
10 | * Personal attacks
11 | * Trolling or insulting/derogatory comments
12 | * Public or private harassment
13 | * Publishing other's private information, such as physical or electronic addresses, without explicit permission
14 | * Other unethical or unprofessional conduct.
15 |
16 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
17 |
18 | This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community in a direct capacity. Personal views, beliefs and values of individuals do not necessarily reflect those of the organisation or affiliated individuals and organisations.
19 |
20 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
21 |
22 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)
23 |
--------------------------------------------------------------------------------
/example/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
69 |
70 |
71 |
167 |
168 |
188 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-vis-network
2 |
3 | ***!!! NOTE !!! Hi developer. Please contribute to the project if you find a bug or suggest an improvement / feature. Because I’m very, very busy these days, and it won’t end in the next 2-4 months. Hope you can do it faster than me )***
4 |
5 | > Vue2 component to integrate with Vis-Network views
6 |
7 |
28 |
29 | Best reagrds to the https://github.com/alexcode/vue2vis which is the base for this component. This project might have some issues from https://github.com/alexcode/vue2vis
30 |
31 | ### Installation
32 | ```
33 | npm install --save vis-util vis-data vis-network vue-vis-network
34 | ```
35 |
36 | or
37 |
38 | ```
39 | yarn add vis-util vis-data vis-network vue-vis-network
40 | ```
41 |
42 | ## Usage
43 |
44 | Declare the component
45 | ``` javascript
46 | import { Network } from "vue-vis-network";
47 | Vue.component('network', Network);
48 | ```
49 |
50 | Add the component in the template.
51 |
52 | ```html
53 |
54 |
55 |
59 |
60 |
61 |
62 | ```
63 |
64 | Add groups, items and options in your observed data or computed.
65 | ``` javascript
66 | new Vue({
67 | el: '#app',
68 | data() {
69 | return {
70 | nodes: [
71 | {id: 1, label: 'circle', shape: 'circle' },
72 | {id: 2, label: 'ellipse', shape: 'ellipse'},
73 | {id: 3, label: 'database',shape: 'database'},
74 | {id: 4, label: 'box', shape: 'box' },
75 | {id: 5, label: 'diamond', shape: 'diamond'},
76 | {id: 6, label: 'dot', shape: 'dot'},
77 | {id: 7, label: 'square', shape: 'square'},
78 | {id: 8, label: 'triangle',shape: 'triangle'},
79 | ],
80 | edges: [
81 | {from: 1, to: 2},
82 | {from: 2, to: 3},
83 | {from: 2, to: 4},
84 | {from: 2, to: 5},
85 | {from: 5, to: 6},
86 | {from: 5, to: 7},
87 | {from: 6, to: 8}
88 | ],
89 | options: {
90 | nodes: {
91 | borderWidth: 4
92 | },
93 | edges: {
94 | color: 'lightgray'
95 | }
96 | }
97 | }
98 | },
99 | });
100 | ```
101 |
102 | Add Visjs CSS
103 | ``` css
104 | import "vue-vis-network/node_modules/vis-network/dist/vis-network.css";
105 | ```
106 |
107 | Here is a [basic working demo](https://codepen.io/r3code/pen/abOjJbQ)
108 |
109 | ## Events
110 |
111 | ### Component Events
112 | By default all Vis-network events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Vis-network event](https://visjs.github.io/vis-network/docs/network/#Events).
113 |
114 | ```html
115 |
116 |
117 |
124 |
125 |
126 |
127 | ```
128 |
129 | ### Data Events
130 |
131 | When you pass an Array of data object, it is converted internally as a DataSet.
132 | An event with the DataSet object will be fired at mounted. It's name will be prepend with the prop name (Ex: `items-mounted`, `groups-mounted`). You could use it to interact with the DataSet.
133 |
134 | All the [Visjs DataSet event](https://visjs.github.io/vis-data/data/dataset.html#Events) will be prepened the same fashion (`items-add`, `items-remove`, `items-update`). For example, pushing a new object to the `items` prop will fire a `items-add` event with the following payload:
135 | ```javascript
136 | {
137 | event: 'add',
138 | properties: {
139 | items: [7],
140 | },
141 | senderId: null,
142 | }
143 | ```
144 |
145 | #### Advanced
146 |
147 | You can also manage your own data bindings by passing your own DataSet or DataView instead of an Array.
148 |
149 | ``` javascript
150 | import { DataSet } from 'vue-vis-network';
151 |
152 | new Vue({
153 | el: '#app',
154 | data() {
155 | return {
156 | nodes: new DataSet([
157 | {id: 1, label: 'circle', shape: 'circle' },
158 | {id: 2, label: 'ellipse', shape: 'ellipse'},
159 | {id: 3, label: 'database',shape: 'database'}
160 | ]),
161 | edges: new DataSet([
162 | {from: 1, to: 2},
163 | {from: 1, to: 3}
164 | ]),
165 | options: {
166 | nodes: {
167 | borderWidth: 4
168 | }
169 | }
170 | }
171 | },
172 | });
173 | ```
174 |
175 | ## Vis-network documentation
176 |
177 | For the full reference see:
178 | * [Network](https://visjs.github.io/vis-network/docs/network/)
179 | * [DataSet](https://visjs.github.io/vis-data/data/dataset.html)
180 | * [DataView](https://visjs.github.io/vis-data/data/dataview.html)
181 |
182 | ## Change log
183 |
184 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
185 |
186 | ## Testing
187 |
188 | ``` bash
189 | $ npm run test
190 | ```
191 |
192 | ## Contributing
193 | Please see [CONTRIBUTING](CONTRIBUTING.md) and [CONDUCT](CONDUCT.md) for details.
194 |
195 | ### Build Setup
196 |
197 | ``` bash
198 | # Once you have cloned this repo, install dependencies
199 | $ npm install
200 |
201 | # Build for development and production with minification
202 | $ npm run build
203 |
204 | ```
205 | **Build for production**
206 | ```
207 | # Linux
208 | NODE_ENV=production npm run build
209 | # Windows
210 | set NODE_ENV=production && npm run build
211 | # Prepare for NPM
212 | set NODE_ENV=production && npm run build:bundle
213 |
214 | ```
215 |
216 | ### Run demo locally
217 |
218 | ``` bash
219 | # install vue-vis-network local module
220 | cd ..
221 | npm link
222 | # prepare example
223 | cd example
224 | # install the example dependencies
225 | npm install
226 | # add local vue-vis-network module to node_modules
227 | npm link vue-vis-network
228 | # run demo server
229 | npm run serve
230 | ```
231 | Go to to see running examples
232 |
233 | NOTE: If you make changes to the library you should run `npm run build` again in the root folder.
234 | The dev server should detect modification and reload the demo
235 |
236 | ## Security
237 |
238 | If you discover any security related issues, please email contact@r3code.ru instead of using the issue tracker.
239 |
240 | ## Credits
241 |
242 | - [Dmitriy S. Sinyavskiy][link-author]
243 | - [Alex Couturon](https://github.com/alexcode)
244 | - [All Contributors][link-contributors]
245 |
246 | ## License
247 |
248 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
249 |
250 | [link-author]: https://github.com/r3code
251 | [link-contributors]: ../../contributors
252 |
--------------------------------------------------------------------------------
/src/components/Network.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
274 |
--------------------------------------------------------------------------------