├── .babelrc ├── .eslintrc.json ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── OLDCHANGELOG.txt ├── README.md ├── ci_test ├── README.md ├── animation_scenarios │ ├── line.basic.html │ └── line.gradient.html ├── lib │ └── ccNetViz.js ├── scenarios │ ├── arrow_color.stable.html │ ├── arrow_color.test.html │ ├── arrow_plugin.stable.html │ ├── arrow_plugin.test.html │ ├── arrow_size.stable.html │ ├── arrow_size.test.html │ ├── circular_layout.stable.html │ ├── circular_layout.test.html │ ├── circular_layout_params.stable.html │ ├── circular_layout_params.test.html │ ├── edge_color.stable.html │ ├── edge_color.test.html │ ├── edge_dashed.stable.html │ ├── edge_dashed.test.html │ ├── edge_dotted.stable.html │ ├── edge_dotted.test.html │ ├── edge_size.stable.html │ ├── edge_size.test.html │ ├── edges_to_edges.stable.html │ ├── edges_to_edges.test.html │ ├── find.stable.html │ ├── find.test.html │ ├── findArea.stable.html │ ├── findArea.test.html │ ├── grid_layout.stable.html │ ├── grid_layout.test.html │ ├── grid_layout_params.stable.html │ ├── grid_layout_params.test.html │ ├── hierarchical2_layout.stable.html │ ├── hierarchical2_layout.test.html │ ├── hierarchical2_layout_params.stable.html │ ├── hierarchical2_layout_params.test.html │ ├── hierarchical_layout.stable.html │ ├── hierarchical_layout.test.html │ ├── hierarchical_layout_params.stable.html │ ├── hierarchical_layout_params.test.html │ ├── hive_layout.stable.html │ ├── hive_layout.test.html │ ├── hive_layout_params.stable.html │ ├── hive_layout_params.test.html │ ├── label.stable.html │ ├── label.test.html │ ├── multi_level.stable.html │ ├── multi_level.test.html │ ├── node_color.stable.html │ ├── node_color.test.html │ ├── node_plugin.stable.html │ ├── node_plugin.test.html │ ├── node_size.stable.html │ ├── node_size.test.html │ ├── remove.stable.html │ ├── remove.test.html │ ├── sdf_font.stable.html │ ├── sdf_font.test.html │ ├── setViewport.stable.html │ ├── setViewport.test.html │ ├── spectral_layout.stable.html │ ├── spectral_layout.test.html │ ├── spectral_layout_params.stable.html │ ├── spectral_layout_params.test.html │ ├── user_defined.stable.html │ ├── user_defined.test.html │ ├── versinus_layout.stable.html │ ├── versinus_layout.test.html │ ├── versinus_layout_params.stable.html │ └── versinus_layout_params.test.html └── slimer │ ├── config.json │ ├── index.js │ ├── temp │ ├── animations.js │ └── images.js │ ├── test.js │ └── worker │ ├── animation.js │ └── image.js ├── commitlint.config.js ├── examples ├── arrow_plugin.html ├── bidirectional.html ├── circular.html ├── complex.html ├── context_menu.html ├── css │ ├── performance.css │ ├── spectrum.css │ └── template.css ├── custom.html ├── data │ ├── Bronchiseptica.json │ ├── CD4.json │ ├── EGFR.json │ ├── ErbB.json │ ├── FA-BRCA.json │ ├── Glucose.json │ ├── HGF.json │ ├── IL-1.json │ ├── IL-6.json │ ├── Influenza.json │ ├── T-Cell-Receptor.json │ ├── T-Cell.json │ ├── T-LGL-2011.json │ ├── T-LGL.json │ ├── Yeast-Apoptosis.json │ ├── circle-10.json │ ├── circle-100.json │ ├── circle-1000.json │ ├── drosophila.json │ ├── fibroblast.json │ ├── graph-10-1.json │ ├── graph-10-2.json │ ├── graph-10-3.json │ ├── graph-100-1.json │ ├── graph-100-2.json │ ├── graph-100-3.json │ ├── graph-1000-1.json │ ├── graph-1000-2.json │ ├── graph-1000-3.json │ ├── graph-5000-5.json │ ├── graph-svg.json │ ├── line-10.json │ ├── line-100.json │ ├── line-1000.json │ ├── macrophage.json │ ├── node.json │ ├── star-10.json │ ├── star-100.json │ ├── star-1000.json │ ├── tree1.json │ └── tree2.json ├── different_sizes.html ├── directed_graphs.html ├── edges_to_edges.html ├── export_image_plugin.html ├── fonts │ ├── OpenSans-Regular.json │ └── OpenSans-Regular.png ├── gendata.js ├── hello_world.html ├── images │ ├── arrow.png │ ├── circle.png │ ├── logo.svg │ ├── node.png │ ├── node_bw.png │ └── thumbnail.xcf ├── interactivity_hover.html ├── interactivity_move.html ├── js │ ├── performance.js │ └── spectrum.js ├── label_styling.html ├── layout_performance.html ├── layout_plugin.html ├── layouts.html ├── libs │ ├── cytoscape.js │ ├── jquery.min.js │ ├── jquery.throttle-debounce.js │ ├── jquery.throttle-debounce.min.js │ ├── json_prettyprint.js │ ├── sigma.js │ └── sigma.parsers.json.min.js ├── line_animate.html ├── line_animate_complex.html ├── line_animate_dot.html ├── line_animation_benchmark.html ├── multi_level.html ├── node_plugin.html ├── save_graph.html ├── sdf.html ├── spatial_search.html ├── styles.html ├── svg_renderer.html ├── template.html ├── texture_creator.html ├── tree.html ├── tree_.html └── userdef_layout.html ├── file_information ├── images ├── arrow.png ├── circle.png └── node.png ├── lib ├── ccNetViz.js ├── ccNetViz.js.map ├── main.js ├── main.js.map └── plugins │ ├── ccNetViz-animation-edge-plugin.js │ ├── ccNetViz-arrow-plugin.js │ ├── ccNetViz-export-image-plugin.js │ ├── ccNetViz-layout-plugin.js │ ├── ccNetViz-multilevel-plugin.js │ ├── ccNetViz-node-plugin.js │ ├── ccNetViz-svg-renderer-plugin.js │ └── example.js ├── notes.txt ├── package.json ├── plugins ├── README.md ├── animation-line │ ├── README.md │ ├── index.js │ ├── package.json │ ├── shaders │ │ ├── easeFunctions │ │ │ ├── bounce-in.glsl │ │ │ ├── bounce-inout.glsl │ │ │ ├── bounce-out.glsl │ │ │ ├── circular-in.glsl │ │ │ ├── circular-inout.glsl │ │ │ ├── circular-out.glsl │ │ │ ├── cubic-in.glsl │ │ │ ├── cubic-inout.glsl │ │ │ ├── cubic-out.glsl │ │ │ ├── exp-in.glsl │ │ │ ├── exp-inout.glsl │ │ │ ├── exp-out.glsl │ │ │ ├── index.js │ │ │ ├── linear.glsl │ │ │ ├── quad-in.glsl │ │ │ ├── quad-inout.glsl │ │ │ ├── quad-out.glsl │ │ │ ├── quart-in.glsl │ │ │ ├── quart-inout-inv.glsl │ │ │ ├── quart-inout.glsl │ │ │ ├── quart-out.glsl │ │ │ ├── quint-in.glsl │ │ │ ├── quint-inout.glsl │ │ │ ├── quint-out.glsl │ │ │ ├── sin-in.glsl │ │ │ ├── sin-inout-inv.glsl │ │ │ ├── sin-inout.glsl │ │ │ └── sin-out.glsl │ │ ├── elements │ │ │ ├── fsColorTexture.glsl │ │ │ ├── fsCurve.glsl │ │ │ ├── fsLabelTexture.glsl │ │ │ ├── fsLabelsBackgroundShader.glsl │ │ │ ├── fsLabelsBorder.glsl │ │ │ ├── fsLineAnimateFuncs.glsl │ │ │ ├── fsLineBasic.glsl │ │ │ ├── fsLineHead.glsl │ │ │ ├── fsLineMain.glsl │ │ │ ├── fsVarColorTexture.glsl │ │ │ ├── getShiftFuncs.glsl │ │ │ ├── index.js │ │ │ ├── vsCircleArrowHead.glsl │ │ │ ├── vsCircleArrowMain.glsl │ │ │ ├── vsCircleHead.glsl │ │ │ ├── vsCircleMain.glsl │ │ │ ├── vsCurveArrowHead.glsl │ │ │ ├── vsCurveArrowMain.glsl │ │ │ ├── vsCurveHead.glsl │ │ │ ├── vsCurveMain.glsl │ │ │ ├── vsLabelsBackgroundShader.glsl │ │ │ ├── vsLabelsBorder.glsl │ │ │ ├── vsLabelsShader.glsl │ │ │ ├── vsLineArrowHead.glsl │ │ │ ├── vsLineArrowMain.glsl │ │ │ ├── vsLineHead.glsl │ │ │ ├── vsLineMain.glsl │ │ │ ├── vsNode.glsl │ │ │ └── vsNodeColored.glsl │ │ └── index.js │ ├── shapes │ │ └── animateLine.js │ ├── webpack.config.js │ └── yarn.lock ├── arrow │ ├── README.md │ ├── animation.js │ ├── main.js │ ├── package.json │ ├── shape.js │ ├── shapes │ │ └── custom.js │ └── webpack.config.js ├── example │ ├── main.js │ ├── package.json │ └── webpack.config.js ├── export-image │ ├── README.md │ ├── package.json │ ├── source │ │ └── main.js │ └── webpack.config.js ├── layout │ ├── README.md │ ├── cytoscape.min.js │ ├── main.js │ ├── package.json │ └── webpack.config.js ├── multilevel │ ├── main.js │ ├── package.json │ └── webpack.config.js ├── node │ ├── README.md │ ├── animation.js │ ├── main.js │ ├── package.json │ ├── shape.js │ ├── shapes │ │ ├── custom.js │ │ ├── ellipse.js │ │ ├── polygon.js │ │ ├── star.js │ │ └── statistical │ │ │ ├── doughnut_chart.js │ │ │ ├── gauge_chart.js │ │ │ ├── pie_chart.js │ │ │ └── radial_histogram.js │ └── webpack.config.js └── svg-renderer │ ├── README.md │ ├── main.js │ ├── package-lock.json │ ├── package.json │ ├── plugins │ ├── edges │ │ ├── circle.js │ │ ├── curve.js │ │ ├── line.js │ │ └── utils.js │ ├── labels │ │ ├── label.js │ │ └── utils.js │ ├── nodes │ │ ├── node.js │ │ └── utils.js │ ├── shader │ │ └── shader.js │ └── utils │ │ └── index.js │ ├── webpack.config.js │ └── yarn.lock ├── src ├── ccNetViz.js ├── color.js ├── cri │ └── layouts.cri ├── dataSources │ ├── files.js │ └── textures.js ├── entrypoint.js ├── geomutils.js ├── gl.js ├── globalUtilities.js ├── interactivityBatch.js ├── layer │ ├── index.js │ ├── plugins │ │ ├── basePlugin.js │ │ ├── baseShape.js │ │ ├── edge │ │ │ ├── index.js │ │ │ ├── shaders │ │ │ │ ├── fsColorTexture.glsl │ │ │ │ ├── fsCurve.glsl │ │ │ │ ├── fsLineBasic.glsl │ │ │ │ ├── getShiftFuncs.glsl │ │ │ │ ├── index.js │ │ │ │ ├── vsCircleArrowHead.glsl │ │ │ │ ├── vsCircleArrowMain.glsl │ │ │ │ ├── vsCircleHead.glsl │ │ │ │ ├── vsCircleMain.glsl │ │ │ │ ├── vsCurveArrowHead.glsl │ │ │ │ ├── vsCurveArrowMain.glsl │ │ │ │ ├── vsCurveHead.glsl │ │ │ │ ├── vsCurveMain.glsl │ │ │ │ ├── vsLineArrowHead.glsl │ │ │ │ ├── vsLineArrowMain.glsl │ │ │ │ ├── vsLineHead.glsl │ │ │ │ └── vsLineMain.glsl │ │ │ └── shape │ │ │ │ ├── edge.js │ │ │ │ └── edgeArrow.js │ │ ├── label │ │ │ ├── index.js │ │ │ ├── shaders │ │ │ │ ├── fsLabelTexture.glsl │ │ │ │ ├── fsLabelsBackgroundShader.glsl │ │ │ │ ├── fsLabelsBorder.glsl │ │ │ │ ├── index.js │ │ │ │ ├── vsCircleLabelBorderMain.glsl │ │ │ │ ├── vsCircleLabelMain.glsl │ │ │ │ ├── vsCircleLabelbgMain.glsl │ │ │ │ ├── vsCurveLabelBorderMain.glsl │ │ │ │ ├── vsCurveLabelMain.glsl │ │ │ │ ├── vsCurveLabelUtilityHead.glsl │ │ │ │ ├── vsCurveLabelbgMain.glsl │ │ │ │ ├── vsDefaultLabel.glsl │ │ │ │ ├── vsDefaultLabelBorder.glsl │ │ │ │ ├── vsDefaultLabelbg.glsl │ │ │ │ ├── vsLabelBorderHead.glsl │ │ │ │ ├── vsLabelHead.glsl │ │ │ │ └── vsLabelbgHead.glsl │ │ │ └── shape │ │ │ │ ├── labels.js │ │ │ │ ├── labelsBackground.js │ │ │ │ └── labelsUtil.js │ │ └── node │ │ │ ├── index.js │ │ │ ├── shaders │ │ │ ├── fsColorTexture.glsl │ │ │ ├── fsVarColorTexture.glsl │ │ │ ├── index.js │ │ │ ├── vsNode.glsl │ │ │ └── vsNodeColored.glsl │ │ │ └── shape.js │ └── util.js ├── layout │ ├── README.md │ ├── circular.js │ ├── force.js │ ├── grid.js │ ├── hierarchical.js │ ├── hierarchical2.js │ ├── hive.js │ ├── index.js │ ├── random.js │ ├── spectral.js │ ├── spectral2.js │ ├── tree.js │ ├── treeT.js │ ├── utils.js │ └── versinus.js ├── lazyEvents.js ├── primitive.js ├── primitiveTools.js ├── quadTree.js ├── shader.js ├── spatialSearch │ ├── geomtools.js │ ├── rbush.js │ └── spatialSearch.js ├── texts │ ├── default.js │ ├── sdf │ │ ├── atlas.js │ │ ├── glyphTrimmer.js │ │ ├── sdf.js │ │ └── spriteGenerator.js │ └── texts.js └── utils.js ├── tests ├── lib │ ├── astrobench.css │ └── astrobench.min.js ├── performance.html ├── performance_js │ └── layout_force.js ├── unit.html └── unit_js │ ├── spatialsearch_complex.js │ └── spatialsearch_simple.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": ["prettier"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | .env.test 68 | 69 | # parcel-bundler cache (https://parceljs.org/) 70 | .cache 71 | 72 | # next.js build output 73 | .next 74 | 75 | # nuxt.js build output 76 | .nuxt 77 | 78 | # vuepress build output 79 | .vuepress/dist 80 | 81 | # Serverless directories 82 | .serverless/ 83 | 84 | # FuseBox cache 85 | .fusebox/ 86 | 87 | # DynamoDB Local files 88 | .dynamodb/ 89 | 90 | 91 | dist/ 92 | *.swp 93 | 94 | .vscode -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | plugins/ 3 | tests/ 4 | .babelrc 5 | .eslintrc.json 6 | .prettierrc 7 | commitlint.config.js 8 | notes.txt 9 | file_information 10 | webpack.config.js -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | lib/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5" 4 | } 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### 1.0.18 (2019-06-14) 6 | 7 | 8 | 9 | ### 1.0.17 (2019-06-13) 10 | -------------------------------------------------------------------------------- /OLDCHANGELOG.txt: -------------------------------------------------------------------------------- 1 | -------------------- ver. 1.0.0 ----------------------------- 2 | Initial commit 3 | 4 | -------------------- ver. 1.0.1 ----------------------------- 5 | Added find function for searching inside circular area (x,y, radius) 6 | 7 | -------------------- ver. 1.0.2 ----------------------------- 8 | Added support for interactivity 9 | Added findArea function for searching inside rectangular area (x1,y1,x2,y2,radius) 10 | Added support for edge target and source at another edge 11 | 12 | -------------------- ver. 1.0.5 ----------------------------- 13 | Better edge styling 14 | Support for SDF (Signed distance) fonts 15 | -------------------------------------------------------------------------------- /ci_test/scenarios/arrow_color.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /ci_test/scenarios/arrow_color.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /ci_test/scenarios/arrow_plugin.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | 16 | 17 | 18 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ci_test/scenarios/arrow_plugin.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | 16 | 17 | 18 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ci_test/scenarios/arrow_size.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/arrow_size.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/circular_layout.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/circular_layout.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/circular_layout_params.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ci_test/scenarios/circular_layout_params.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_color.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_color.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_dashed.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_dashed.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_dotted.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_dotted.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_size.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edge_size.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/edges_to_edges.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ci_test/scenarios/edges_to_edges.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ci_test/scenarios/grid_layout.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/grid_layout.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/grid_layout_params.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /ci_test/scenarios/grid_layout_params.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical2_layout.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical2_layout.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical2_layout_params.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical2_layout_params.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical_layout.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical_layout.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical_layout_params.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ci_test/scenarios/hierarchical_layout_params.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /ci_test/scenarios/hive_layout.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/hive_layout.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/hive_layout_params.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ci_test/scenarios/hive_layout_params.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ci_test/scenarios/node_color.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ci_test/scenarios/node_color.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ci_test/scenarios/node_size.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ci_test/scenarios/node_size.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ci_test/scenarios/remove.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ci_test/scenarios/remove.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ci_test/scenarios/sdf_font.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /ci_test/scenarios/sdf_font.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /ci_test/scenarios/setViewport.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/setViewport.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ci_test/scenarios/spectral_layout.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/spectral_layout.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/spectral_layout_params.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /ci_test/scenarios/spectral_layout_params.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /ci_test/scenarios/user_defined.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ci_test/scenarios/user_defined.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ci_test/scenarios/versinus_layout.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/versinus_layout.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /ci_test/scenarios/versinus_layout_params.stable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ci_test/scenarios/versinus_layout_params.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ci_test/slimer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "IMAGE": { 3 | "PORT": 3001, 4 | "FLAG": "images", 5 | "TEMP": { 6 | "PATH": "./ci_test/slimer/temp/images.js", 7 | "TEMPLATE": {} 8 | }, 9 | "COMMAND": "xvfb-run --server-args=\"-screen 0 1024x768x24\" -a ./node_modules/.bin/slimerjs ./ci_test/slimer/worker/image.js", 10 | "SCREENSHOTS": "../frames" 11 | }, 12 | "ANIMATIONS": { 13 | "PORT": 3000, 14 | "FLAG": "animations", 15 | "TEMP": { 16 | "PATH": "./ci_test/slimer/temp/animations.js", 17 | "TEMPLATE": {} 18 | }, 19 | "COMMAND": "xvfb-run --server-args=\"-screen 0 1024x768x24\" -a ./node_modules/.bin/slimerjs ./ci_test/slimer/worker/animation.js", 20 | "SCREENSHOTS": "../animation_frames" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /ci_test/slimer/temp/animations.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/ci_test/slimer/temp/animations.js -------------------------------------------------------------------------------- /ci_test/slimer/temp/images.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/ci_test/slimer/temp/images.js -------------------------------------------------------------------------------- /ci_test/slimer/worker/animation.js: -------------------------------------------------------------------------------- 1 | const temp = require('../temp/animations'); 2 | const port = temp.port || '3000'; 3 | 4 | (async function() { 5 | for (let i = 0; i < temp.files.length; i++) { 6 | const p = temp.files[i]; 7 | await open(p.replace('.html', ''), i + 1 === temp.files.length); 8 | } 9 | })(); 10 | 11 | function open(p, s) { 12 | const page = require('webpage').create(); 13 | let frame = 0; 14 | 15 | page 16 | .open( 17 | `http://127.0.0.1:${String(port)}/ci_test/animation_scenarios/${p}.html` 18 | ) 19 | .then(() => { 20 | page.viewportSize = { 21 | width: 250, 22 | height: 250, 23 | }; 24 | 25 | let captureFrame = setInterval(() => { 26 | if (s === true && frame === 5) { 27 | clearInterval(captureFrame); 28 | slimer.exit(); 29 | } else if (frame === 5) { 30 | page.close(); 31 | clearInterval(captureFrame); 32 | } else { 33 | frame++; 34 | page.render(`ci_test/animation_frames/${frame}.${p}.png`); 35 | } 36 | }, 500); 37 | }); 38 | 39 | return new Promise(resolve => setTimeout(resolve, 4000)); 40 | } 41 | -------------------------------------------------------------------------------- /ci_test/slimer/worker/image.js: -------------------------------------------------------------------------------- 1 | const temp = require('../temp/images'); 2 | const port = temp.port || '8125'; 3 | 4 | (async function() { 5 | for (let i = 0; i < temp.files.length; i++) { 6 | const p = temp.files[i]; 7 | await open(p.replace('.html', ''), i + 1 === temp.files.length); 8 | } 9 | })(); 10 | 11 | function open(p, s) { 12 | const page = require('webpage').create(); 13 | 14 | page 15 | .open(`http://127.0.0.1:${String(port)}/ci_test/scenarios/${p}.html`) 16 | .then(() => { 17 | page.viewportSize = { 18 | width: 250, 19 | height: 250, 20 | }; 21 | 22 | setTimeout(() => { 23 | page.render(`ci_test/frames/${p}.png`); 24 | page.close(); 25 | 26 | if (s === true) { 27 | slimer.exit(); 28 | } 29 | }, 3000); 30 | }); 31 | return new Promise(resolve => setTimeout(resolve, 4000)); 32 | } 33 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /examples/bidirectional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bidirectional graphs example 5 | 6 | 7 | 8 | 9 | 10 |
11 |

Bidirectional graphs example

12 | 13 |
14 | To enter to deeper node, click on node "Hello" or "World". Then use 15 | right button on mouse for going back. 16 |
17 | More detailed information please visit the 18 | documentation. 19 |
20 |
21 | 26 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /examples/data/circle-10.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"} 13 | ], 14 | "edges": [ 15 | { "source": 0, "target": 1 }, 16 | { "source": 1, "target": 2 }, 17 | { "source": 2, "target": 3 }, 18 | { "source": 3, "target": 4 }, 19 | { "source": 4, "target": 5 }, 20 | { "source": 5, "target": 6 }, 21 | { "source": 6, "target": 7 }, 22 | { "source": 7, "target": 8 }, 23 | { "source": 8, "target": 9 }, 24 | { "source": 9, "target": 0 } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /examples/data/graph-10-1.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"} 13 | ], 14 | "edges": [ 15 | { "source": 0, "target": 1 }, 16 | { "source": 1, "target": 6 }, 17 | { "source": 2, "target": 5 }, 18 | { "source": 3, "target": 9 }, 19 | { "source": 4, "target": 5 }, 20 | { "source": 5, "target": 6 }, 21 | { "source": 6, "target": 0 }, 22 | { "source": 7, "target": 9 }, 23 | { "source": 8, "target": 7 }, 24 | { "source": 9, "target": 6 } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /examples/data/graph-10-2.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "gurpreet"}, 8 | { "label": "shelly"}, 9 | { "label": "mohit"}, 10 | { "label": "gaurav"}, 11 | { "label": "9"}, 12 | { "label": "10"} 13 | ], 14 | "edges": [ 15 | { "source": 0, "target": 3 }, 16 | { "source": 0, "target": 8 }, 17 | { "source": 1, "target": 5 }, 18 | { "source": 1, "target": 2 }, 19 | { "source": 2, "target": 4 }, 20 | { "source": 3, "target": 5 }, 21 | { "source": 4, "target": 3 }, 22 | { "source": 5, "target": 1 }, 23 | { "source": 5, "target": 6 }, 24 | { "source": 6, "target": 5 }, 25 | { "source": 6, "target": 1 }, 26 | { "source": 7, "target": 6 }, 27 | { "source": 7, "target": 9 }, 28 | { "source": 8, "target": 9 }, 29 | { "source": 8, "target": 7 }, 30 | { "source": 9, "target": 4 }, 31 | { "source": 9, "target": 3 } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /examples/data/graph-10-3.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"} 13 | ], 14 | "edges": [ 15 | { "source": 0, "target": 5 }, 16 | { "source": 0, "target": 6 }, 17 | { "source": 1, "target": 6 }, 18 | { "source": 1, "target": 0 }, 19 | { "source": 1, "target": 5 }, 20 | { "source": 2, "target": 5 }, 21 | { "source": 2, "target": 3 }, 22 | { "source": 3, "target": 7 }, 23 | { "source": 3, "target": 1 }, 24 | { "source": 4, "target": 7 }, 25 | { "source": 5, "target": 1 }, 26 | { "source": 5, "target": 2 }, 27 | { "source": 6, "target": 1 }, 28 | { "source": 7, "target": 6 }, 29 | { "source": 7, "target": 8 }, 30 | { "source": 7, "target": 2 }, 31 | { "source": 8, "target": 4 }, 32 | { "source": 8, "target": 9 }, 33 | { "source": 9, "target": 0 } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /examples/data/graph-svg.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1" }, 4 | { "label": "2" }, 5 | { 6 | "label": "3" 7 | }, 8 | { "label": "4", "style": "bigNode" }, 9 | { 10 | "label": "5" 11 | }, 12 | { "label": "6" }, 13 | { "label": "7" }, 14 | { "label": "8" }, 15 | { "label": "9" }, 16 | { "label": "10" } 17 | ], 18 | "edges": [ 19 | { "source": 0, "target": 5 }, 20 | { "source": 0, "target": 6 }, 21 | { "source": 1, "target": 7, "style": "wideEdge" }, 22 | { "source": 1, "target": 0 }, 23 | { "source": 1, "target": 5 }, 24 | { "source": 3, "target": 7 }, 25 | { "source": 3, "target": 1 }, 26 | { "source": 4, "target": 7 }, 27 | { "source": 5, "target": 1 }, 28 | { "source": 7, "target": 6 }, 29 | { "source": 7, "target": 8 }, 30 | { "source": 7, "target": 1 }, 31 | { "source": 8, "target": 4, "style": "wideEdge" }, 32 | { "source": 8, "target": 9 }, 33 | { "source": 9, "target": 4 }, 34 | { "source": 2, "target": 2 }, 35 | { "source": 2, "target": 1 }, 36 | { "source": 1, "target": 2 }, 37 | { "source": 0, "target": 0, "style": "wideEdge" } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /examples/data/line-10.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"} 13 | ], 14 | "edges": [ 15 | { "source": 0, "target": 1 }, 16 | { "source": 1, "target": 2 }, 17 | { "source": 2, "target": 3 }, 18 | { "source": 3, "target": 4 }, 19 | { "source": 4, "target": 5 }, 20 | { "source": 5, "target": 6 }, 21 | { "source": 6, "target": 7 }, 22 | { "source": 7, "target": 8 }, 23 | { "source": 8, "target": 9 } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples/data/node.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"} 13 | ] 14 | } -------------------------------------------------------------------------------- /examples/data/star-10.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"} 13 | ], 14 | "edges": [ 15 | { "source": 0, "target": 1 }, 16 | { "source": 0, "target": 2 }, 17 | { "source": 0, "target": 3 }, 18 | { "source": 0, "target": 4 }, 19 | { "source": 0, "target": 5 }, 20 | { "source": 0, "target": 6 }, 21 | { "source": 0, "target": 7 }, 22 | { "source": 0, "target": 8 }, 23 | { "source": 0, "target": 9 } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples/data/tree1.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"}, 13 | { "label": "11"}, 14 | { "label": "12"}, 15 | { "label": "13"} 16 | ], 17 | "edges": [ 18 | { "source": 3, "target": 4 }, 19 | { "source": 3, "target": 0 }, 20 | { "source": 4, "target": 7 }, 21 | { "source": 4, "target": 8 }, 22 | { "source": 0, "target": 1 }, 23 | { "source": 0, "target": 2 }, 24 | { "source": 0, "target": 12 }, 25 | { "source": 2, "target": 10 }, 26 | { "source": 2, "target": 11 }, 27 | { "source": 1, "target": 5 }, 28 | { "source": 5, "target": 9 }, 29 | { "source": 5, "target": 6 } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /examples/data/tree2.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "label": "1"}, 4 | { "label": "2"}, 5 | { "label": "3"}, 6 | { "label": "4"}, 7 | { "label": "5"}, 8 | { "label": "6"}, 9 | { "label": "7"}, 10 | { "label": "8"}, 11 | { "label": "9"}, 12 | { "label": "10"}, 13 | { "label": "11"}, 14 | { "label": "12"}, 15 | { "label": "13"}, 16 | { "label": "another"}, 17 | { "label": "node"}, 18 | { "label": "in"}, 19 | { "label": "the"}, 20 | { "label": "sky"} 21 | ], 22 | "edges": [ 23 | { "source": 3, "target": 4 }, 24 | { "source": 3, "target": 0 }, 25 | { "source": 3, "target": 13 }, 26 | { "source": 12, "target": 14 }, 27 | { "source": 4, "target": 7 }, 28 | { "source": 4, "target": 8 }, 29 | { "source": 0, "target": 1 }, 30 | { "source": 0, "target": 2 }, 31 | { "source": 0, "target": 12 }, 32 | { "source": 2, "target": 10 }, 33 | { "source": 2, "target": 15 }, 34 | { "source": 2, "target": 11 }, 35 | { "source": 1, "target": 5 }, 36 | { "source": 5, "target": 9 }, 37 | { "source": 5, "target": 16 }, 38 | { "source": 16, "target": 17 }, 39 | { "source": 5, "target": 6 } 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /examples/fonts/OpenSans-Regular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/examples/fonts/OpenSans-Regular.png -------------------------------------------------------------------------------- /examples/hello_world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ccNetViz example 5 | 11 | 12 | 13 | 14 | 15 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/examples/images/arrow.png -------------------------------------------------------------------------------- /examples/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/examples/images/circle.png -------------------------------------------------------------------------------- /examples/images/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/examples/images/node.png -------------------------------------------------------------------------------- /examples/images/node_bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/examples/images/node_bw.png -------------------------------------------------------------------------------- /examples/images/thumbnail.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/examples/images/thumbnail.xcf -------------------------------------------------------------------------------- /examples/libs/jquery.throttle-debounce.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery throttle / debounce - v1.1 - 3/7/2010 3 | * http://benalman.com/projects/jquery-throttle-debounce-plugin/ 4 | * 5 | * Copyright (c) 2010 "Cowboy" Ben Alman 6 | * Dual licensed under the MIT and GPL licenses. 7 | * http://benalman.com/about/license/ 8 | */ 9 | (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this); -------------------------------------------------------------------------------- /examples/libs/jquery.throttle-debounce.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery throttle / debounce - v1.1 - 3/7/2010 3 | * http://benalman.com/projects/jquery-throttle-debounce-plugin/ 4 | * 5 | * Copyright (c) 2010 "Cowboy" Ben Alman 6 | * Dual licensed under the MIT and GPL licenses. 7 | * http://benalman.com/about/license/ 8 | */ 9 | (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this); -------------------------------------------------------------------------------- /examples/libs/json_prettyprint.js: -------------------------------------------------------------------------------- 1 | if (!library) 2 | var library = {}; 3 | 4 | library.json = { 5 | replacer: function(match, pIndent, pKey, pVal, pEnd) { 6 | var key = ''; 7 | var val = ''; 8 | var str = ''; 9 | var r = pIndent || ''; 10 | if (pKey) 11 | r = r + key + pKey.replace(/[": ]/g, '') + ': '; 12 | if (pVal) 13 | r = r + (pVal[0] == '"' ? str : val) + pVal + ''; 14 | return r + (pEnd || ''); 15 | }, 16 | prettyPrint: function(obj) { 17 | var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg; 18 | return JSON.stringify(obj, null, 3) 19 | .replace(/&/g, '&').replace(/\\"/g, '"') 20 | .replace(//g, '>') 21 | .replace(jsonLine, library.json.replacer); 22 | } 23 | }; -------------------------------------------------------------------------------- /examples/libs/sigma.parsers.json.min.js: -------------------------------------------------------------------------------- 1 | (function(a){"use strict";if("undefined"==typeof sigma)throw"sigma is not declared";sigma.utils.pkg("sigma.parsers"),sigma.utils.pkg("sigma.utils"),sigma.utils.xhr=function(){if(window.XMLHttpRequest)return new XMLHttpRequest;var a,b;if(window.ActiveXObject){a=["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];for(b in a)try{return new ActiveXObject(a[b])}catch(a){}}return null},sigma.parsers.json=function(a,b,c){var d,e=sigma.utils.xhr();if(!e)throw"XMLHttpRequest not supported, cannot load the file.";e.open("GET",a,!0),e.onreadystatechange=function(){4===e.readyState&&(d=JSON.parse(e.responseText),b instanceof sigma?(b.graph.clear(),b.graph.read(d)):"object"==typeof b?(b.graph=d,b=new sigma(b)):"function"==typeof b&&(c=b,b=null),c&&c(b||d))},e.send()}}).call(this); -------------------------------------------------------------------------------- /file_information: -------------------------------------------------------------------------------- 1 | This file has a brief description about the src folder 2 | 3 | src/geomutils.js 4 | just supports tools for drawing 5 | edgeSource && edgeTarget - our library supports edges starting from not just nodes but also another edges, 6 | so it calculates the coordinates for the edge beginning and ending x and y coordinates 7 | getCurveShift support function for calculating how far is the most distant point of the curve ( bi-directional edge ). 8 | 9 | src/primitive.js 10 | wraps the handling setting up the variables and parameters for each shader (look into this.set function ) 11 | 12 | src/layer.js 13 | ccNetViz has feature for having dynamic updates into the graph. To keep the performance high, the graph is then separated into two main layers which are drawn over each other (handled in the ccNetViz.js). 14 | This is definition of each layer. Basically does and handles drawing of the whole graph. 15 | 16 | src/interactivityBatch.js 17 | As mentioned above, the library has the feature to handle the changes into the dynamic layer of the graph. It has 2 layers ( main and temp ) passed as a parameter which are updated while calling the code. 18 | 19 | src/texts/sdf folder 20 | - spriteGenerator.js - renders the SDF version of the single glyph (character) 21 | - glyphTrimmer - trim the rendered SDF character for the unneccessary blank space around (so that not all characters has the same pixel width and height) - basically support for proportional fonts 22 | - atlas - pack the set of the characters into the one big texture to be rendered (using node shelf-pack library) 23 | - sdf - handles the whole rendering pipeline. Lazy render (generate SDF texture and add it into the atlas) the text character-by-character 24 | 25 | -------------------------------------------------------------------------------- /images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/images/arrow.png -------------------------------------------------------------------------------- /images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/images/circle.png -------------------------------------------------------------------------------- /images/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HelikarLab/ccNetViz/a07aed79e710f8fe8fc597e79148ad610e702912/images/node.png -------------------------------------------------------------------------------- /plugins/animation-line/index.js: -------------------------------------------------------------------------------- 1 | // import BasePlugin from './basePlugin'; 2 | import { AnimateLine } from './shapes/animateLine'; 3 | 4 | // TODO: check ccNetViz 5 | if (!ccNetViz) { 6 | console.error('Please import ccNetViz library'); 7 | } 8 | 9 | const BasePlugin = ccNetViz.BasePlugin; 10 | 11 | class AnimateEdgePlugin extends BasePlugin { 12 | constructor(options) { 13 | super(options); 14 | 15 | const { gl, edgeStyle } = options; 16 | 17 | this.scene.add('lines', new AnimateLine(gl, edgeStyle)); 18 | } 19 | runRegistrations({ gl, textures }) { 20 | let defaultAdder = (section, addSection) => { 21 | if (typeof section.style.texture === 'string') 22 | section.style.texture = textures.get( 23 | gl, 24 | section.style.texture, 25 | addSection 26 | ); 27 | else addSection(); 28 | }; 29 | 30 | this.register('lines', 'lines', defaultAdder); 31 | } 32 | } 33 | 34 | ccNetViz.Shaders.edge = AnimateEdgePlugin; 35 | -------------------------------------------------------------------------------- /plugins/animation-line/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animation-line", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "GPL-3.0", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.5.5", 11 | "@babel/preset-env": "^7.5.5", 12 | "babel-loader": "^8.0.6", 13 | "webpack": "^4.39.1", 14 | "webpack-cli": "^3.3.2" 15 | }, 16 | "dependencies": { 17 | "@babel/runtime": "^7.5.5", 18 | "raw-loader": "^3.1.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/bounce-in.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float bounceOut(float t) { 6 | const float a = 4.0 / 11.0; 7 | const float b = 8.0 / 11.0; 8 | const float c = 9.0 / 10.0; 9 | 10 | const float ca = 4356.0 / 361.0; 11 | const float cb = 35442.0 / 1805.0; 12 | const float cc = 16061.0 / 1805.0; 13 | 14 | float t2 = t * t; 15 | 16 | return t < a 17 | ? 7.5625 * t2 18 | : t < b 19 | ? 9.075 * t2 - 9.9 * t + 3.4 20 | : t < c 21 | ? ca * t2 - cb * t + cc 22 | : 10.8 * t * t - 20.52 * t + 10.72; 23 | } 24 | 25 | 26 | float ease(float t) { 27 | return 1.0 - bounceOut(1.0 - t); 28 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/bounce-inout.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float bounceOut(float t) { 6 | const float a = 4.0 / 11.0; 7 | const float b = 8.0 / 11.0; 8 | const float c = 9.0 / 10.0; 9 | 10 | const float ca = 4356.0 / 361.0; 11 | const float cb = 35442.0 / 1805.0; 12 | const float cc = 16061.0 / 1805.0; 13 | 14 | float t2 = t * t; 15 | 16 | return t < a 17 | ? 7.5625 * t2 18 | : t < b 19 | ? 9.075 * t2 - 9.9 * t + 3.4 20 | : t < c 21 | ? ca * t2 - cb * t + cc 22 | : 10.8 * t * t - 20.52 * t + 10.72; 23 | } 24 | 25 | float ease(float t) { 26 | return t < 0.5 27 | ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) 28 | : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5; 29 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/bounce-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float ease(float t) { 6 | const float a = 4.0 / 11.0; 7 | const float b = 8.0 / 11.0; 8 | const float c = 9.0 / 10.0; 9 | 10 | const float ca = 4356.0 / 361.0; 11 | const float cb = 35442.0 / 1805.0; 12 | const float cc = 16061.0 / 1805.0; 13 | 14 | float t2 = t * t; 15 | 16 | return t < a 17 | ? 7.5625 * t2 18 | : t < b 19 | ? 9.075 * t2 - 9.9 * t + 3.4 20 | : t < c 21 | ? ca * t2 - cb * t + cc 22 | : 10.8 * t * t - 20.52 * t + 10.72; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/circular-in.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return 1.0 - sqrt(1.0 - t * t); 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/circular-inout.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t < 0.5 3 | ? 0.5 * (1.0 - sqrt(1.0 - 4.0 * t * t)) 4 | : 0.5 * (sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0); 5 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/circular-out.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return sqrt((2.0 - t) * t); 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/cubic-in.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t * t * t; 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/cubic-inout.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t < 0.5 3 | ? 4.0 * t * t * t 4 | : 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0; 5 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/cubic-out.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | float f = t - 1.0; 3 | return f * f * f + 1.0; 4 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/exp-in.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/exp-inout.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t == 0.0 || t == 1.0 3 | ? t 4 | : t < 0.5 5 | ? +0.5 * pow(2.0, (20.0 * t) - 10.0) 6 | : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; 7 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/exp-out.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t); 3 | } 4 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/linear.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t; 3 | } 4 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quad-in.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t * t; 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quad-inout.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t < 0.5 3 | ? +8.0 * pow(t, 4.0) 4 | : -8.0 * pow(t - 1.0, 4.0) + 1.0; 5 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quad-out.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return -t * (t - 2.0); 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quart-in.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return pow(t, 4.0); 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quart-inout-inv.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t < 0.5 3 | ? pow((t / 8.), 0.25) 4 | : -pow((1.0 - t) / 8., 0.25) + 1.; 5 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quart-inout.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t < 0.5 3 | ? +8.0 * pow(t, 4.0) 4 | : -8.0 * pow(t - 1.0, 4.0) + 1.0; 5 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quart-out.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return pow(t - 1.0, 3.0) * (1.0 - t) + 1.0; 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quint-in.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return pow(t, 5.0); 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quint-inout.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return t < 0.5 3 | ? +16.0 * pow(t, 5.0) 4 | : 0.5 * pow(2.0 * t - 2.0, 5.0) + 1.0; // NOTE: fix original bug, no '-' 5 | } 6 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/quint-out.glsl: -------------------------------------------------------------------------------- 1 | float ease(float t) { 2 | return 1.0 + (pow(t - 1.0, 5.0)); // NOTE: fix original bug '-' -> '+' 3 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/sin-in.glsl: -------------------------------------------------------------------------------- 1 | #ifndef HALF_PI 2 | #define HALF_PI 1.5707963267948966 3 | #endif 4 | 5 | float ease(float t) { 6 | return sin((t - 1.0) * HALF_PI) + 1.0; 7 | } 8 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/sin-inout-inv.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float ease(float t) { 6 | return acos(1. - 2. * t) / PI; 7 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/sin-inout.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float ease(float t) { 6 | return -0.5 * (cos(PI * t) - 1.0); 7 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/easeFunctions/sin-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef HALF_PI 2 | #define HALF_PI 1.5707963267948966 3 | #endif 4 | 5 | float ease(float t) { 6 | return sin(t * HALF_PI); 7 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsColorTexture.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform vec4 color; 3 | uniform sampler2D texture; 4 | varying vec2 tc; 5 | void main(void) { 6 | gl_FragColor = color * texture2D(texture, vec2(tc.s, tc.t)); 7 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsCurve.glsl: -------------------------------------------------------------------------------- 1 | #extension GL_OES_standard_derivatives : enable 2 | #ifdef GL_ES 3 | precision highp float; 4 | #endif 5 | uniform float width; 6 | uniform vec4 color; 7 | uniform float type; 8 | uniform float lineStepSize; 9 | uniform float lineSize; 10 | varying vec2 c; 11 | varying vec2 v_lengthSoFar; 12 | void main(void) { 13 | float part = abs(fract(length(v_lengthSoFar) * lineStepSize * lineSize)); 14 | 15 | // line types 16 | if (type >= 2.5) { // 3.0 dotted 17 | part = fract(part * 3.0); 18 | if (part < 0.5) 19 | discard; 20 | } else if (type >= 1.5) { // 2.0 - chain dotted 21 | if (part < 0.15) 22 | discard; 23 | if (part > 0.30 && part < 0.45) 24 | discard; 25 | } else if (type >= 0.5) { // 1.0 - dashed 26 | if (part < 0.5) 27 | discard; 28 | } 29 | 30 | vec2 px = dFdx(c); 31 | vec2 py = dFdy(c); 32 | float fx = 2.0 * c.x * px.x - px.y; 33 | float fy = 2.0 * c.y * py.x - py.y; 34 | float sd = (c.x * c.x - c.y) / sqrt(fx * fx + fy * fy); 35 | float alpha = 1.0 - abs(sd) / width; 36 | if (alpha < 0.0) 37 | discard; 38 | gl_FragColor = vec4(color.r, color.g, color.b, min(alpha, 1.0)); 39 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsLabelTexture.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform lowp sampler2D texture; 3 | uniform mediump vec4 color; 4 | uniform mediump float height_font; 5 | uniform float type; 6 | uniform float buffer; 7 | uniform float boldness; 8 | float gamma = 4.0 * 1.4142 * boldness / height_font; 9 | varying mediump vec2 tc; 10 | void main() { 11 | if(type > 0.5){ //SDF 12 | float tx=texture2D(texture, tc).a; 13 | float a= smoothstep(buffer - gamma, buffer + gamma, tx); 14 | gl_FragColor=vec4(color.rgb, a*color.a); 15 | }else{ //NORMAL FONT 16 | gl_FragColor = color * texture2D(texture, vec2(tc.s, tc.t)); 17 | } 18 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsLabelsBackgroundShader.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform vec4 backgroundColor; 3 | void main() { 4 | gl_FragColor = vec4(backgroundColor.r, backgroundColor.g, backgroundColor.b,1); 5 | } 6 | 7 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsLabelsBorder.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform vec4 borderColor; 3 | varying vec2 n; 4 | void main() { 5 | gl_FragColor = vec4(borderColor.r, borderColor.g, borderColor.b, borderColor.a-length(n)); 6 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsLineBasic.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform float type; 3 | uniform vec4 color; 4 | varying vec2 n; 5 | varying vec2 v_lengthSoFar; 6 | uniform float lineSize; 7 | void main(void) { 8 | float part = abs(fract(length(v_lengthSoFar) * lineSize * 5.0)); 9 | 10 | // line types 11 | if (type >= 2.5) { // 3.0 dotted 12 | part = fract(part * 3.0); 13 | if (part < 0.5) 14 | discard; 15 | } else if (type >= 1.5) { // 2.0 - chain dotted 16 | if (part < 0.15) 17 | discard; 18 | if (part > 0.30 && part < 0.45) 19 | discard; 20 | } else if (type >= 0.5) { // 1.0 - dashed 21 | if (part < 0.5) 22 | discard; 23 | } 24 | 25 | gl_FragColor = vec4(color.r, color.g, color.b, color.a - length(n)); 26 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsLineHead.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform float type; 3 | uniform float animateType; 4 | uniform vec4 color; 5 | uniform vec4 animateColor; 6 | uniform float animateSpeed; 7 | uniform int animateDotNum; 8 | uniform float animateDotInterval; 9 | varying vec2 n; 10 | varying float v_time; 11 | varying vec2 v_startPos; 12 | varying vec2 v_endPos; 13 | varying vec2 v_screen; 14 | varying vec2 v_lengthSoFar; 15 | varying float v_lineWidth; 16 | varying float v_animateMaxWidth; 17 | varying vec2 v_size; 18 | 19 | uniform float lineSize; 20 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsLineMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | float part = abs(fract(length(v_lengthSoFar) * lineSize * 5.0)); 3 | 4 | // line types 5 | if (type >= 2.5) { // 3.0 dotted 6 | part = fract(part * 3.0); 7 | if (part < 0.5) 8 | discard; 9 | } else if (type >= 1.5) { // 2.0 - chain dotted 10 | if (part < 0.15) 11 | discard; 12 | if (part > 0.30 && part < 0.45) 13 | discard; 14 | } else if (type >= 0.5) { // 1.0 - dashed 15 | if (part < 0.5) 16 | discard; 17 | } 18 | 19 | // line animate types 20 | if (animateType >= 5.5) { 21 | gl_FragColor = isAnimateDot() * color; 22 | } else if (animateType >= 4.5) { 23 | gl_FragColor = isAnimateWave() * color; 24 | } else if (animateType >= 3.5) { 25 | gl_FragColor = isAnimateBubble() * color; 26 | } else if (animateType >= 2.5) { 27 | gl_FragColor = isAnimateCoveredDoubleGradient() * animateColor + 28 | (1. - isAnimateCoveredDoubleGradient()) * color; 29 | } else if (animateType >= 1.5) { 30 | gl_FragColor = isAnimateCoveredGradient() * animateColor + 31 | (1. - isAnimateCoveredGradient()) * color; 32 | } else if (animateType >= 0.5) { 33 | gl_FragColor = 34 | isAnimateCovered() * animateColor + (1. - isAnimateCovered()) * color; 35 | } else { 36 | gl_FragColor = vec4(color.r, color.g, color.b, color.a - length(n)); 37 | } 38 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/fsVarColorTexture.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform sampler2D texture; 3 | varying vec2 tc; 4 | varying vec4 c; 5 | void main(void) { 6 | gl_FragColor = c * texture2D(texture, vec2(tc.s, tc.t)); 7 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/getShiftFuncs.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 curveShift; 2 | vec4 getShiftCurve(void) { 3 | vec2 shiftN = vec2(curveShift.x, aspect2 * curveShift.y); 4 | float length = length(screen * shiftN); 5 | return vec4(exc * (length == 0.0 ? vec2(0, 0) : shiftN * 0.5 / length), 0, 0); 6 | } 7 | attribute vec2 circleShift; 8 | vec4 getShiftCircle(void) { return vec4(size * circleShift, 0, 0); } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/index.js: -------------------------------------------------------------------------------- 1 | import vsLineHead from './vsLineHead.glsl'; 2 | import vsLineMain from './vsLineMain.glsl'; 3 | import getShiftFuncs from './getShiftFuncs.glsl'; 4 | 5 | import { easeFunctions } from '../easeFunctions'; 6 | import fsLineHead from './fsLineHead.glsl'; 7 | import fsLineAnimateFuncs from './fsLineAnimateFuncs.glsl'; 8 | import fsLineMain from './fsLineMain.glsl'; 9 | 10 | const vsLine = [vsLineHead, getShiftFuncs, vsLineMain].join('\n'); 11 | const easeFunctionPart = ease => { 12 | return `${easeFunctions[ease ? ease : 'linear']}`; 13 | }; 14 | 15 | const fsLineAnimate = ease => { 16 | return [ 17 | fsLineHead, 18 | easeFunctionPart(ease), 19 | fsLineAnimateFuncs, 20 | fsLineMain, 21 | ].join('\n'); 22 | }; 23 | 24 | const elementShaders = { 25 | vsLine, 26 | fsLineAnimate, 27 | }; 28 | 29 | export { elementShaders }; 30 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCircleArrowHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 direction; 3 | attribute vec2 textureCoord; 4 | attribute float offsetMul; 5 | uniform float offset; 6 | uniform vec2 arrowsize; 7 | uniform vec2 size; 8 | uniform vec2 screen; 9 | uniform float exc; 10 | uniform float aspect2; 11 | uniform mat4 transform; 12 | varying vec2 tc; -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCircleArrowMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 u = direction; 3 | vec2 v = vec2(direction.y, -direction.x); 4 | gl_Position = 5 | getShiftCurve() + getShiftCircle() + 6 | vec4((arrowsize.x * (0.5 - textureCoord.x) * v - 7 | arrowsize.y * textureCoord.y * u - offset * offsetMul * u) / 8 | screen, 9 | 0, 0) + 10 | transform * vec4(position, 0, 1); 11 | tc = textureCoord; 12 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCircleHead.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | attribute vec2 position; 3 | attribute vec2 normal; 4 | attribute vec2 curve; 5 | attribute vec2 lengthSoFar; 6 | uniform float exc; 7 | uniform vec2 screen; 8 | uniform float aspect2; 9 | uniform float aspect; 10 | uniform vec2 size; 11 | uniform mat4 transform; 12 | varying vec2 c; 13 | varying vec2 v_lengthSoFar; -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCircleMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | gl_Position = getShiftCurve() + getShiftCircle() + vec4(size * normal, 0, 0) + 3 | transform * vec4(position, 0, 1); 4 | c = curve; 5 | 6 | vec4 p = transform * vec4(size * lengthSoFar, 0, 0); 7 | v_lengthSoFar = vec2(p.x, p.y / aspect); 8 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCurveArrowHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 direction; 3 | attribute vec2 textureCoord; 4 | attribute float offsetMul; 5 | uniform float offset; 6 | uniform vec2 arrowsize; 7 | uniform vec2 size; 8 | uniform float exc; 9 | uniform float cexc; 10 | uniform vec2 screen; 11 | uniform float aspect2; 12 | uniform mat4 transform; 13 | varying vec2 tc; -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCurveArrowMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 u = normalize(vec2(direction.y, -aspect2 * direction.x)); 3 | u = normalize(direction - cexc * u / length(screen * u)); 4 | u = u / length(screen * u); 5 | vec2 v = vec2(u.y, -aspect2 * u.x); 6 | v = v / length(screen * v); 7 | gl_Position = 8 | getShiftCurve() + getShiftCircle() + 9 | vec4(arrowsize.x * (0.5 - textureCoord.x) * v - 10 | arrowsize.y * textureCoord.y * u - offset * offsetMul * u, 11 | 0, 0) + 12 | transform * vec4(position, 0, 1); 13 | tc = textureCoord; 14 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCurveHead.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | attribute vec2 position; 3 | attribute vec2 normal; 4 | attribute vec2 curve; 5 | attribute vec2 lengthSoFar; 6 | uniform vec2 size; 7 | uniform float exc; 8 | uniform vec2 screen; 9 | uniform float aspect2; 10 | uniform float aspect; 11 | uniform mat4 transform; 12 | varying vec2 v_lengthSoFar; 13 | varying vec2 c; -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsCurveMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 n = vec2(normal.x, aspect2 * normal.y); 3 | float length = length(screen * n); 4 | n = length == 0.0 ? vec2(0, 0) : n / length; 5 | gl_Position = getShiftCurve() + getShiftCircle() + vec4(exc * n, 0, 0) + 6 | transform * vec4(position, 0, 1); 7 | c = curve; 8 | 9 | vec4 p = transform * vec4(lengthSoFar, 0, 0); 10 | v_lengthSoFar = vec2(p.x, p.y / aspect); 11 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsLabelsBackgroundShader.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 relative; 3 | uniform vec2 scale; 4 | uniform mat4 transform; 5 | uniform float fontScale; 6 | uniform float offset; 7 | void main(void) { 8 | gl_Position = vec4(scale * (relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) + transform * vec4(position, 0, 1); 9 | } 10 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsLabelsBorder.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec2 relative; 3 | attribute vec2 position; 4 | attribute vec2 normal; 5 | uniform vec2 width; 6 | uniform mat4 transform; 7 | uniform float fontScale; 8 | uniform float offset; 9 | uniform vec2 scale; 10 | varying vec2 n; 11 | void main(void) { 12 | vec4 pos = vec4(scale * (relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) + transform * vec4(position, 0, 1); 13 | gl_Position = vec4(width * normal, 0, 0) + pos; 14 | n = normal; 15 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsLabelsShader.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 relative; 3 | attribute vec2 textureCoord; 4 | uniform float offset; 5 | uniform vec2 scale; 6 | uniform float fontScale; 7 | uniform mat4 transform; 8 | varying vec2 tc; 9 | void main(void) { 10 | gl_Position = vec4(scale * (relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) + transform * vec4(position, 0, 1); 11 | tc = textureCoord; 12 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsLineArrowHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 direction; 3 | attribute vec2 textureCoord; 4 | attribute float offsetMul; 5 | uniform float offset; 6 | uniform vec2 arrowsize; 7 | uniform vec2 size; 8 | uniform vec2 screen; 9 | uniform float exc; 10 | uniform float aspect2; 11 | uniform mat4 transform; 12 | varying vec2 tc; -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsLineArrowMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 u = direction / length(screen * direction); 3 | vec2 v = vec2(u.y, -aspect2 * u.x); 4 | v = v / length(screen * v); 5 | gl_Position = 6 | getShiftCurve() + getShiftCircle() + 7 | vec4(arrowsize.x * (0.5 - textureCoord.x) * v - 8 | arrowsize.y * textureCoord.y * u - offset * offsetMul * u, 9 | 0, 0) + 10 | transform * vec4(position, 0, 1); 11 | tc = textureCoord; 12 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsLineHead.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec2 position; 3 | attribute vec2 normal; 4 | attribute vec2 lengthSoFar; 5 | attribute vec2 startPos; 6 | attribute vec2 endPos; 7 | uniform float time; 8 | uniform float exc; 9 | uniform vec2 size; 10 | uniform vec2 screen; 11 | uniform float aspect2; 12 | uniform float aspect; 13 | uniform float width; 14 | uniform float animateMaxWidth; 15 | uniform mat4 transform; 16 | varying float v_time; 17 | varying vec2 v_startPos; 18 | varying vec2 v_endPos; 19 | varying vec2 v_screen; 20 | varying vec2 n; 21 | varying vec2 v_lengthSoFar; 22 | varying float v_lineWidth; 23 | varying float v_animateMaxWidth; 24 | varying vec2 v_size; 25 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsLineMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 finalWidth = vec2(max(width, animateMaxWidth), max(width, animateMaxWidth)); 3 | gl_Position = getShiftCurve() + getShiftCircle() + 4 | vec4(finalWidth / screen * normal, 0, 0) + transform * vec4(position, 0, 1); 5 | 6 | vec4 p = transform * vec4(lengthSoFar, 0, 0); 7 | v_lengthSoFar = vec2(p.x, p.y / aspect); 8 | v_time = time; 9 | 10 | // v_startPos = startPos; 11 | // v_endPos = endPos; 12 | v_startPos = (transform * vec4(startPos, 0, 1)).xy; 13 | v_endPos = (transform * vec4(endPos, 0, 1)).xy; 14 | v_screen = screen; 15 | v_lineWidth = width; 16 | v_animateMaxWidth = animateMaxWidth; 17 | v_size = size; 18 | 19 | n = normal; 20 | } 21 | -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsNode.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 textureCoord; 3 | uniform vec2 size; 4 | uniform mat4 transform; 5 | varying vec2 tc; 6 | void main(void) { 7 | gl_Position = vec4(size * (textureCoord - vec2(0.5, 0.5)), 0, 0) + 8 | transform * vec4(position, 0, 1); 9 | tc = textureCoord; 10 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/elements/vsNodeColored.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 textureCoord; 3 | attribute vec4 color; 4 | uniform vec2 size; 5 | uniform mat4 transform; 6 | varying vec2 tc; 7 | varying vec4 c; 8 | void main(void) { 9 | gl_Position = vec4(size * (textureCoord - vec2(0.5, 0.5)), 0, 0) + 10 | transform * vec4(position, 0, 1); 11 | tc = textureCoord; 12 | c = color; 13 | } -------------------------------------------------------------------------------- /plugins/animation-line/shaders/index.js: -------------------------------------------------------------------------------- 1 | import { easeFunctions } from './easeFunctions'; 2 | import { elementShaders } from './elements'; 3 | 4 | export { easeFunctions, elementShaders }; 5 | -------------------------------------------------------------------------------- /plugins/animation-line/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | entry: './index.js', 5 | output: { 6 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 7 | filename: 'ccNetViz-animation-edge-plugin.js', 8 | libraryTarget: 'umd', 9 | }, 10 | mode: 'production', // development 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules/, 16 | loader: 'babel-loader', 17 | }, 18 | // GLSL Loader 19 | { 20 | test: /\.glsl$/, 21 | use: { loader: 'raw-loader' }, 22 | }, 23 | ], 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /plugins/arrow/animation.js: -------------------------------------------------------------------------------- 1 | class Animation { 2 | constructor() { 3 | this.config = { 4 | fps: 10, 5 | duration: 2000, 6 | frame: 0, 7 | frameCount: 0, 8 | scene: 0, 9 | }; 10 | this.listener = {}; 11 | this.status = true; 12 | this.frameBatch = []; 13 | 14 | this.config.frameCount = this.config.fps * (this.config.duration / 1000); 15 | } 16 | 17 | addListener(type) { 18 | this.listener[type] = true; 19 | } 20 | 21 | async draw(instance, frame) { 22 | this.frameBatch.push(frame); 23 | if (typeof this.instance === 'undefined') { 24 | this.instance = instance; 25 | } 26 | if (this.frameBatch.length >= Object.keys(this.listener).length) { 27 | await this.fps(); 28 | if (this.frameBatch.length) { 29 | if (typeof ccNetViz.plugin !== 'undefined') { 30 | if (typeof ccNetViz.plugin.animationHandler === 'undefined') 31 | ccNetViz.plugin.animationHandler = 'arrow'; 32 | if (ccNetViz.plugin.animationHandler === 'arrow') 33 | this.instance.animateTexture(); 34 | } 35 | if (frame > this.config.frameCount) { 36 | this.status = false; 37 | } 38 | this.config.scene = frame % this.config.frameCount; 39 | this.frameBatch.length = 0; 40 | } 41 | } 42 | } 43 | 44 | fps() { 45 | return new Promise(resolve => setTimeout(resolve, 1000 / this.config.fps)); 46 | } 47 | } 48 | 49 | let animation = new Animation(); 50 | 51 | export default animation; 52 | -------------------------------------------------------------------------------- /plugins/arrow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ccnetviz-arrow-plugin", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "GPL-3.0", 11 | "devDependencies": { 12 | "@babel/core": "^7.4.5", 13 | "@babel/plugin-transform-runtime": "^7.4.4", 14 | "@babel/preset-env": "^7.4.5", 15 | "babel-loader": "^8.0.6", 16 | "webpack": "^4.32.1", 17 | "webpack-cli": "^3.3.2" 18 | }, 19 | "dependencies": { 20 | "@babel/runtime": "^7.4.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /plugins/arrow/webpack.config.js: -------------------------------------------------------------------------------- 1 | var Webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 8 | filename: 'ccNetViz-arrow-plugin.js', 9 | }, 10 | mode: 'production', // development 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules|bower_components/, 16 | loader: 'babel-loader', 17 | query: { 18 | presets: [ 19 | '@babel/preset-env', 20 | { 21 | plugins: ['@babel/plugin-transform-runtime'], 22 | }, 23 | ], 24 | }, 25 | }, 26 | ], 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /plugins/example/main.js: -------------------------------------------------------------------------------- 1 | let Integration = (o, i) => { 2 | let shapes = []; 3 | let options = o; 4 | 5 | let delta = (options.styles['delta'] = { type: 'delta' }); 6 | 7 | // Generating styles 8 | let shape = new Node(delta); 9 | shapes.push({ config: shape.toConfig(), name: 'delta' }); 10 | 11 | return { options, shapes }; 12 | }; 13 | 14 | class Node { 15 | constructor(config, instance) { 16 | this._draw(); 17 | } 18 | 19 | _draw() { 20 | this.canvas = document.createElement('canvas'); 21 | this.canvas.width = 16; 22 | this.canvas.height = 16; 23 | 24 | this.context = this.canvas.getContext('2d'); 25 | this.context.fillStyle = '#333333'; 26 | this.context.beginPath(); 27 | this.context.lineTo(8, 0); 28 | this.context.lineTo(16, 8); 29 | this.context.lineTo(8, 16); 30 | this.context.lineTo(0, 8); 31 | this.context.lineTo(8, 0); 32 | this.context.closePath(); 33 | this.context.fill(); 34 | } 35 | 36 | toConfig() { 37 | return new Promise((resolve, reject) => { 38 | this.ready = true; 39 | this.canvas.toBlob(blob => { 40 | resolve( 41 | Object.assign({ texture: URL.createObjectURL(blob) }, this.config) 42 | ); 43 | }, 'image/png'); 44 | }); 45 | } 46 | } 47 | 48 | if (typeof ccNetViz === 'undefined') { 49 | console.warn('ccNetViz example plugin could not be implemented.'); 50 | } else { 51 | if (typeof ccNetViz.plugin === 'undefined') ccNetViz.plugin = {}; 52 | ccNetViz.plugin.example = { Integration }; 53 | } 54 | 55 | export default { Integration }; 56 | -------------------------------------------------------------------------------- /plugins/example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/preset-env": "^7.5.5", 13 | "babel-core": "^6.26.3", 14 | "webpack": "^4.39.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var Webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 8 | filename: 'example.js', 9 | }, 10 | mode: 'development', 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules|bower_components/, 16 | loader: 'babel-loader', 17 | query: { 18 | presets: ['@babel/preset-env'], 19 | }, 20 | }, 21 | ], 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /plugins/export-image/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ccnetviz-image-export-plugin", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "source/main.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "GPL-3.0", 11 | "devDependencies": { 12 | "@babel/core": "^7.4.5", 13 | "@babel/preset-env": "^7.4.5", 14 | "babel-loader": "^8.0.6", 15 | "webpack": "^4.32.1", 16 | "webpack-cli": "^3.3.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /plugins/export-image/webpack.config.js: -------------------------------------------------------------------------------- 1 | var Webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: './source/main.js', 6 | output: { 7 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 8 | filename: 'ccNetViz-export-image-plugin.js', 9 | }, 10 | mode: 'production', // development 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules|bower_components/, 16 | loader: 'babel-loader', 17 | query: { 18 | presets: ['@babel/preset-env'], 19 | }, 20 | }, 21 | ], 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /plugins/layout/README.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | This plugin allows you to use Cytoscape layouts to your ccNetViz library. 4 | 5 | ## Basic Example 6 | 7 | ```html 8 | 9 | 10 | 11 | ccNetViz example 12 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 45 | 46 | 47 | ``` 48 | 49 | ## Documentation 50 | 51 | ### ccNetViz.plugin.layout(Nodes, Edges, Layout); 52 | 53 | #### Nodes 54 | 55 | Nodes argument is an array of objects describing graph nodes. 56 | 57 | #### Edges 58 | 59 | Edges argument is an array of objects describing directed graph edges. 60 | 61 | #### Layout 62 | 63 | More detailed information: [Cytoscape layouts](http://js.cytoscape.org/#layouts) 64 | -------------------------------------------------------------------------------- /plugins/layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cytoscape-layout-plugin", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "GPL-3.0", 11 | "devDependencies": { 12 | "@babel/core": "^7.4.5", 13 | "@babel/preset-env": "^7.4.5", 14 | "babel-loader": "^8.0.6", 15 | "webpack": "^4.32.1", 16 | "webpack-cli": "^3.3.2" 17 | }, 18 | "dependencies": { 19 | "@babel/runtime": "^7.4.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /plugins/layout/webpack.config.js: -------------------------------------------------------------------------------- 1 | var Webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 8 | filename: 'ccNetViz-layout-plugin.js', 9 | }, 10 | mode: 'production', // development 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules|bower_components/, 16 | loader: 'babel-loader', 17 | query: { 18 | presets: ['@babel/preset-env'], 19 | }, 20 | }, 21 | ], 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /plugins/multilevel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "multilevel", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/preset-env": "^7.5.5", 13 | "babel-core": "^6.26.3", 14 | "webpack": "^4.39.3" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/multilevel/webpack.config.js: -------------------------------------------------------------------------------- 1 | var Webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 8 | filename: 'ccNetViz-multilevel-plugin.js', 9 | }, 10 | mode: 'production', 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules|bower_components/, 16 | loader: 'babel-loader', 17 | query: { 18 | presets: ['@babel/preset-env'], 19 | }, 20 | }, 21 | ], 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /plugins/node/animation.js: -------------------------------------------------------------------------------- 1 | class Animation { 2 | constructor() { 3 | this.config = { 4 | fps: 10, 5 | duration: 2000, 6 | frame: 0, 7 | frameCount: 0, 8 | scene: 0, 9 | }; 10 | this.listener = {}; 11 | this.status = true; 12 | this.frameBatch = []; 13 | 14 | this.config.frameCount = this.config.fps * (this.config.duration / 1000); 15 | } 16 | 17 | addListener(type) { 18 | this.listener[type] = true; 19 | } 20 | 21 | async draw(instance, frame) { 22 | this.frameBatch.push(frame); 23 | if (typeof this.instance === 'undefined') { 24 | this.instance = instance; 25 | } 26 | if (this.frameBatch.length >= Object.keys(this.listener).length) { 27 | await this.fps(); 28 | if (this.frameBatch.length) { 29 | if (typeof ccNetViz.plugin !== 'undefined') { 30 | if (typeof ccNetViz.plugin.animationHandler === 'undefined') 31 | ccNetViz.plugin.animationHandler = 'node'; 32 | if (ccNetViz.plugin.animationHandler === 'node') 33 | this.instance.animateTexture(); 34 | } 35 | if (frame > this.config.frameCount) { 36 | this.status = false; 37 | } 38 | this.config.scene = frame % this.config.frameCount; 39 | this.frameBatch.length = 0; 40 | } 41 | } 42 | } 43 | 44 | fps() { 45 | return new Promise(resolve => setTimeout(resolve, 1000 / this.config.fps)); 46 | } 47 | } 48 | 49 | let animation = new Animation(); 50 | 51 | export default animation; 52 | -------------------------------------------------------------------------------- /plugins/node/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ccnetviz-node-plugin", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "GPL-3.0", 11 | "devDependencies": { 12 | "@babel/core": "^7.4.5", 13 | "@babel/plugin-transform-runtime": "^7.4.4", 14 | "@babel/preset-env": "^7.4.5", 15 | "babel-loader": "^8.0.6", 16 | "webpack": "^4.32.1", 17 | "webpack-cli": "^3.3.2" 18 | }, 19 | "dependencies": { 20 | "@babel/runtime": "^7.4.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /plugins/node/shapes/custom.js: -------------------------------------------------------------------------------- 1 | import Shape from '../shape'; 2 | 3 | let Custom = (config, instance, t) => { 4 | class Custom extends Shape { 5 | constructor(config, instance, t) { 6 | super(config, instance, t); 7 | this.type = 'Custom'; 8 | } 9 | _preDraw() { 10 | switch (this.config.type) { 11 | case 'square': 12 | this.config.lines = [{}, { x: 1 }, { x: 1, y: 1 }, { y: 1 }]; 13 | break; 14 | case 'vee': 15 | this.config.lines = [ 16 | {}, 17 | { x: 0.5, y: 0.4 }, 18 | { x: 1 }, 19 | { x: 0.5, y: 1 }, 20 | {}, 21 | ]; 22 | break; 23 | case 'tag': 24 | this.config.lines = [ 25 | {}, 26 | { x: 0.7 }, 27 | { x: 1, y: 0.5 }, 28 | { x: 0.7, y: 1 }, 29 | { y: 1 }, 30 | {}, 31 | ]; 32 | break; 33 | default: 34 | break; 35 | } 36 | } 37 | 38 | _draw() { 39 | this.context.beginPath(); 40 | this.config.lines.map(line => { 41 | this.context.lineTo(this.t(line.x || 0), this.t(line.y || 0)); 42 | }); 43 | this.context.closePath(); 44 | this.context.stroke(); 45 | this.context.fill(); 46 | } 47 | } 48 | return new Custom(config, instance, t); 49 | }; 50 | 51 | export default Custom; 52 | -------------------------------------------------------------------------------- /plugins/node/shapes/polygon.js: -------------------------------------------------------------------------------- 1 | import Shape from '../shape'; 2 | 3 | let Polygon = (config, instance, t) => { 4 | class Polygon extends Shape { 5 | constructor(config, instance, t) { 6 | super(config, instance, t); 7 | this.type = 'Polygon'; 8 | } 9 | _preDraw() { 10 | switch (this.config.type) { 11 | case 'triangle': 12 | this.config.edges = 3; 13 | break; 14 | case 'quadrilateral': 15 | this.config.edges = 4; 16 | break; 17 | case 'pentagon': 18 | this.config.edges = 5; 19 | break; 20 | case 'hexagon': 21 | this.config.edges = 6; 22 | break; 23 | case 'heptagon': 24 | this.config.edges = 7; 25 | break; 26 | case 'octagon': 27 | this.config.edges = 8; 28 | break; 29 | case 'nonagon': 30 | this.config.edges = 9; 31 | break; 32 | case 'decagon': 33 | this.config.edges = 9; 34 | break; 35 | default: 36 | break; 37 | } 38 | } 39 | _draw() { 40 | this.context.beginPath(); 41 | let edges = this.config.edges || 3; 42 | let degree = 360 / edges; 43 | let radius = this.config.size / 2; 44 | 45 | for (let i = 0; i < edges; i++) { 46 | let theta = degree * (i + 1) * (Math.PI / 180); 47 | let center = radius + this.config.stroke.size; 48 | 49 | let x = center + radius * Math.cos(theta); 50 | let y = center + radius * Math.sin(theta); 51 | this.context.lineTo(x, y); 52 | } 53 | 54 | this.context.closePath(); 55 | this.context.stroke(); 56 | this.context.fill(); 57 | } 58 | } 59 | return new Polygon(config, instance, t); 60 | }; 61 | 62 | export default Polygon; 63 | -------------------------------------------------------------------------------- /plugins/node/shapes/star.js: -------------------------------------------------------------------------------- 1 | import Shape from '../shape'; 2 | 3 | let Star = (config, instance, t) => { 4 | class Star extends Shape { 5 | constructor(config, instance, t) { 6 | super(config, instance, t); 7 | this.type = 'Star'; 8 | } 9 | _preDraw() { 10 | if (this.config.type === 'star') { 11 | this.config.spikes = 7; 12 | } else { 13 | for (let spike = 3; spike <= 10; spike++) { 14 | if (this.config.type === `star-${spike}`) this.config.spikes = spike; 15 | } 16 | } 17 | } 18 | _draw() { 19 | this.context.beginPath(); 20 | let spikes = this.config.spikes || 5; 21 | let inset = this.config.inset || 2; 22 | let radius = this.config.size / 2; 23 | 24 | for (var i = 1; i <= spikes * 2; i++) { 25 | let x, y; 26 | let theta = (i * (Math.PI * 2)) / (spikes * 2); 27 | let center = radius + this.config.stroke.size; 28 | 29 | if (i % 2 == 0) { 30 | x = center + radius * Math.cos(theta); 31 | y = center + radius * Math.sin(theta); 32 | } else { 33 | x = center + (radius / inset) * Math.cos(theta); 34 | y = center + (radius / inset) * Math.sin(theta); 35 | } 36 | 37 | this.context.lineTo(x, y); 38 | } 39 | 40 | this.context.closePath(); 41 | this.context.stroke(); 42 | this.context.fill(); 43 | } 44 | } 45 | return new Star(config, instance, t); 46 | }; 47 | 48 | export default Star; 49 | -------------------------------------------------------------------------------- /plugins/node/shapes/statistical/pie_chart.js: -------------------------------------------------------------------------------- 1 | import Shape from '../../shape'; 2 | 3 | let PieChart = (config, instance, t) => { 4 | class PieChart extends Shape { 5 | constructor(config, instance, t) { 6 | super(config, instance, t); 7 | this.type = 'PieChart'; 8 | } 9 | _draw() { 10 | let charts = this.config.chart; 11 | let radius = this.config.size / 2; 12 | let center = radius + this.config.stroke.size; 13 | let cursor = { end: 0, start: 0 }; 14 | 15 | this.context.beginPath(); 16 | this.context.arc(center, center, radius, 0, 2 * Math.PI, false); 17 | this.context.stroke(); 18 | this.context.fill(); 19 | 20 | for (var i = 1; i <= charts.length; i++) { 21 | let item = charts[i - 1]; 22 | let angle = 2 * (item.ratio / 100) * Math.PI; 23 | 24 | cursor.end = angle; 25 | this.context.beginPath(); 26 | this.context.moveTo(center, center); 27 | this.context.arc( 28 | center, 29 | center, 30 | radius - 1, 31 | cursor.start, 32 | cursor.end + cursor.start, 33 | false 34 | ); 35 | this.context.fillStyle = item.color || '#000000'; 36 | this.context.fill(); 37 | cursor.start += angle; 38 | } 39 | } 40 | } 41 | return new PieChart(config, instance, t); 42 | }; 43 | 44 | export default PieChart; 45 | -------------------------------------------------------------------------------- /plugins/node/webpack.config.js: -------------------------------------------------------------------------------- 1 | var Webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 8 | filename: 'ccNetViz-node-plugin.js', 9 | }, 10 | mode: 'production', // development 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules|bower_components/, 16 | loader: 'babel-loader', 17 | query: { 18 | presets: [ 19 | '@babel/preset-env', 20 | { 21 | plugins: ['@babel/plugin-transform-runtime'], 22 | }, 23 | ], 24 | }, 25 | }, 26 | ], 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /plugins/svg-renderer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svg-renderer-plugin", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "GPL-3.0", 11 | "devDependencies": { 12 | "@babel/core": "^7.4.5", 13 | "@babel/preset-env": "^7.4.5", 14 | "babel-loader": "^8.0.6", 15 | "webpack": "^4.32.1", 16 | "webpack-cli": "^3.3.2" 17 | }, 18 | "dependencies": { 19 | "@babel/runtime": "^7.4.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /plugins/svg-renderer/plugins/labels/label.js: -------------------------------------------------------------------------------- 1 | import baseUtils from '../utils/index'; 2 | import labelUtils from './utils'; 3 | 4 | var generateLabels = function() { 5 | this.set = async function(drawEntities, svg, styles) { 6 | let nodes = drawEntities.nodes; 7 | const labelSize = baseUtils.getSize( 8 | svg, 9 | styles.node, 10 | baseUtils.getNodesCnt(drawEntities), 11 | 0.25 12 | ); 13 | 14 | for (let i = 0; i < nodes.length; i++) { 15 | const node = nodes[i]; 16 | let currentStyle = labelUtils.updateStyles(node, styles, labelSize); 17 | 18 | await this.draw(svg, node, currentStyle); 19 | } 20 | }; 21 | 22 | this.draw = async function(svg, node, styles) { 23 | const height = baseUtils.getSVGDimensions(svg).height; 24 | const width = baseUtils.getSVGDimensions(svg).width; 25 | 26 | var currentLabel = document.createElementNS( 27 | 'http://www.w3.org/2000/svg', 28 | 'text' 29 | ); 30 | 31 | const pos = labelUtils.updatePosition( 32 | currentLabel, 33 | node, 34 | height, 35 | width, 36 | styles 37 | ); 38 | const x = pos.x; 39 | const y = pos.y; 40 | 41 | const labelColor = 42 | styles && styles.label && styles.label.color 43 | ? styles.label.color 44 | : 'black'; 45 | currentLabel.setAttributeNS(null, 'x', x); 46 | currentLabel.setAttributeNS(null, 'y', y); 47 | currentLabel.setAttributeNS(null, 'fill', labelColor); 48 | svg.appendChild(currentLabel); 49 | }; 50 | }; 51 | 52 | export { generateLabels }; 53 | -------------------------------------------------------------------------------- /plugins/svg-renderer/plugins/nodes/utils.js: -------------------------------------------------------------------------------- 1 | import baseUtils from '../utils/index'; 2 | 3 | export default class { 4 | // FUNCTION: checks if the node has individual styles 5 | static updateStyles(svg, drawEntities, node, styles) { 6 | let currentStyle; 7 | if (node.style !== undefined) currentStyle = styles[node.style]; 8 | 9 | if (currentStyle === undefined) currentStyle = styles.node; 10 | 11 | return currentStyle; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /plugins/svg-renderer/plugins/utils/index.js: -------------------------------------------------------------------------------- 1 | export default class { 2 | static getSVGDimensions(svg) { 3 | // let height = svg.height.baseVal.value; 4 | // let width = svg.width.baseVal.value; 5 | 6 | let height = svg.getAttribute('height'); 7 | let width = svg.getAttribute('width'); 8 | 9 | return { height, width }; 10 | } 11 | 12 | // FUNCTION: returns number of nodes 13 | static getNodesCnt(drawEntities) { 14 | return drawEntities.nodes.length; 15 | } 16 | 17 | // FUNCTION: return number of edges 18 | static getEdgesCnt(drawEntities) { 19 | return ( 20 | drawEntities.lines.length + 21 | drawEntities.curves.length + 22 | drawEntities.circles.length 23 | ); 24 | } 25 | 26 | // FUNCTION: Gives a number through which various sizes like 27 | // curvature, node size, etc are determined 28 | // Similar to `src/ccNetViz` -> 385 29 | static getSize(context, styles, count, sc) { 30 | let svg = this.getSVGDimensions(context); 31 | // console.log(styles); 32 | 33 | // multiplied by 0.5 as done in `src/ccNetViz` on line -> 445,446 34 | let height = svg.height * 0.5; 35 | let width = svg.width * 0.5; 36 | 37 | let result = sc * Math.sqrt((width * height) / (count + 1)); 38 | if (styles) { 39 | let min = styles.size ? styles.size : styles.minSize; 40 | let max = styles.size ? styles.size : styles.maxSize; 41 | 42 | result = max ? Math.min(max, result) : result; 43 | if (result < styles.hideSize) return 0; 44 | result = min ? Math.max(min, result) : result; 45 | } 46 | return result; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /plugins/svg-renderer/webpack.config.js: -------------------------------------------------------------------------------- 1 | var Webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.join(__dirname, '..', '..', 'lib', 'plugins'), 8 | // path: __dirname, 9 | filename: 'ccNetViz-svg-renderer-plugin.js', 10 | }, 11 | mode: 'production', 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /node_modules|bower_components/, 17 | loader: 'babel-loader', 18 | query: { 19 | presets: ['@babel/preset-env'], 20 | }, 21 | }, 22 | { 23 | test: /\.glsl$/, 24 | use: { loader: 'raw-loader' }, 25 | }, 26 | ], 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/dataSources/files.js: -------------------------------------------------------------------------------- 1 | import ccNetViz_utils from '../utils' ; 2 | import ccNetViz_gl from '../gl' ; 3 | 4 | /** 5 | * Copyright (c) 2016, Helikar Lab. 6 | * All rights reserved. 7 | * 8 | * This source code is licensed under the GPLv3 License. 9 | * Authors: David Tichy, Aleš Saska 10 | */ 11 | 12 | export default class { 13 | constructor(events, onLoad){ 14 | this._load = [events.debounce(onLoad || (() => {}), 5)]; 15 | this._files = {}; 16 | this._pending = {}; 17 | this._n = 0; 18 | } 19 | 20 | _transformFile(data, dataType) { 21 | if(dataType === 'json') 22 | return JSON.parse(data); 23 | return data; 24 | } 25 | 26 | get(url) { 27 | return this._files[url]; 28 | } 29 | 30 | /* 31 | * @param type { 32 | * url: 'url of file', 33 | * success: callback 34 | * dataType "text" || "json" 35 | * } 36 | */ 37 | load(url, action, dataType) { 38 | let p = this._pending[url]; 39 | let f = this._files[url]; 40 | 41 | if (p) { 42 | p.push(action); 43 | } 44 | else if (f) { 45 | action && action(); 46 | } 47 | else { 48 | p = this._pending[url] = [action]; 49 | this._n++; 50 | 51 | ccNetViz_utils.ajax(url, (data) => { 52 | this._files[url] = this._transformFile(data,dataType); 53 | p.forEach(a => a && a(this._files[url])); 54 | delete this._pending[url]; 55 | --this._n || this._load.forEach(l => l()); 56 | }, dataType=='arraybuffer'?dataType:undefined); 57 | } 58 | return f; 59 | } 60 | 61 | onLoad (action) { 62 | if(this.allLoaded()) 63 | action(); 64 | else 65 | this._load.push(action); 66 | } 67 | 68 | allLoaded(){ 69 | return ccNetViz_utils.emptyObject(this._pending); 70 | } 71 | 72 | } 73 | -------------------------------------------------------------------------------- /src/entrypoint.js: -------------------------------------------------------------------------------- 1 | import ccNetViz from './ccNetViz'; 2 | 3 | // Main entry point into ccNetViz libaray 4 | function ccNetVizAdvanced(drawingElement, ...args) { 5 | let typeOfDE = drawingElement.nodeName.toLowerCase(); 6 | 7 | const renderer = ccNetVizAdvanced.prototype.elementRenderers[typeOfDE]; 8 | 9 | if (!renderer) { 10 | throw new Error(`No renderer for ${typeOfDE} element`); 11 | } 12 | 13 | return new renderer(drawingElement, ...args); 14 | } 15 | 16 | ccNetVizAdvanced.prototype.elementRenderers = { 17 | canvas: ccNetViz, 18 | }; 19 | 20 | window.ccNetVizAdvanced = ccNetVizAdvanced; 21 | export default ccNetViz; 22 | export { ccNetVizAdvanced }; 23 | -------------------------------------------------------------------------------- /src/layer/plugins/baseShape.js: -------------------------------------------------------------------------------- 1 | class BaseShape { 2 | constructor() { 3 | this._primitive = null; 4 | 5 | ['update', 'updateEl', 'draw'].forEach(k => { 6 | this[k] = (...args) => this.getPrimitive()[k](...args); 7 | }); 8 | } 9 | set(...newargs) { 10 | //if(!args[5]) //filler 11 | newargs[5] = newargs[5] || this.filler; 12 | return this.getPrimitive().set(...newargs); 13 | } 14 | updateEl(...newargs) { 15 | //if(!args[3]) //filler 16 | newargs[3] = newargs[3] || this.filler; 17 | return this.getPrimitive().updateEl(...newargs); 18 | } 19 | getPrimitive() { 20 | return this._primitive; 21 | } 22 | } 23 | 24 | class BaseShapeManager { 25 | constructor() { 26 | this._filler = null; 27 | } 28 | 29 | getFiller() { 30 | return this._filler; 31 | } 32 | } 33 | 34 | export { BaseShape, BaseShapeManager }; 35 | -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/fsColorTexture.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform vec4 color; 3 | uniform sampler2D texture; 4 | varying vec2 tc; 5 | void main(void) { 6 | gl_FragColor = color * texture2D(texture, vec2(tc.s, tc.t)); 7 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/fsCurve.glsl: -------------------------------------------------------------------------------- 1 | #extension GL_OES_standard_derivatives : enable 2 | #ifdef GL_ES 3 | precision highp float; 4 | #endif 5 | uniform float width; 6 | uniform vec4 color; 7 | uniform float type; 8 | uniform float lineStepSize; 9 | uniform float lineSize; 10 | varying vec2 c; 11 | varying vec2 v_lengthSoFar; 12 | void main(void) { 13 | float part = abs(fract(length(v_lengthSoFar) * lineStepSize * lineSize)); 14 | 15 | // line types 16 | if (type >= 2.5) { // 3.0 dotted 17 | part = fract(part * 3.0); 18 | if (part < 0.5) 19 | discard; 20 | } else if (type >= 1.5) { // 2.0 - chain dotted 21 | if (part < 0.15) 22 | discard; 23 | if (part > 0.30 && part < 0.45) 24 | discard; 25 | } else if (type >= 0.5) { // 1.0 - dashed 26 | if (part < 0.5) 27 | discard; 28 | } 29 | 30 | vec2 px = dFdx(c); 31 | vec2 py = dFdy(c); 32 | float fx = 2.0 * c.x * px.x - px.y; 33 | float fy = 2.0 * c.y * py.x - py.y; 34 | float sd = (c.x * c.x - c.y) / sqrt(fx * fx + fy * fy); 35 | float alpha = 1.0 - abs(sd) / width; 36 | if (alpha < 0.0) 37 | discard; 38 | gl_FragColor = vec4(color.r, color.g, color.b, min(alpha, 1.0)); 39 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/fsLineBasic.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform float type; 3 | uniform vec4 color; 4 | varying vec2 n; 5 | varying vec2 v_lengthSoFar; 6 | uniform float lineSize; 7 | void main(void) { 8 | float part = abs(fract(length(v_lengthSoFar) * lineSize * 5.0)); 9 | 10 | // line types 11 | if (type >= 2.5) { // 3.0 dotted 12 | part = fract(part * 3.0); 13 | if (part < 0.5) 14 | discard; 15 | } else if (type >= 1.5) { // 2.0 - chain dotted 16 | if (part < 0.15) 17 | discard; 18 | if (part > 0.30 && part < 0.45) 19 | discard; 20 | } else if (type >= 0.5) { // 1.0 - dashed 21 | if (part < 0.5) 22 | discard; 23 | } 24 | 25 | gl_FragColor = vec4(color.r, color.g, color.b, color.a - length(n)); 26 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/getShiftFuncs.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 curveShift; 2 | vec4 getShiftCurve(void) { 3 | vec2 shiftN = vec2(curveShift.x, aspect2 * curveShift.y); 4 | float length = length(screen * shiftN); 5 | return vec4(exc * (length == 0.0 ? vec2(0, 0) : shiftN * 0.5 / length), 0, 0); 6 | } 7 | attribute vec2 circleShift; 8 | vec4 getShiftCircle(void) { return vec4(size * circleShift, 0, 0); } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/index.js: -------------------------------------------------------------------------------- 1 | import vsLineHead from './vsLineHead.glsl'; 2 | import vsLineMain from './vsLineMain.glsl'; 3 | import getShiftFuncs from './getShiftFuncs.glsl'; 4 | 5 | import fsLineBasic from './fsLineBasic.glsl'; 6 | 7 | import fsColorTexture from './fsColorTexture.glsl'; 8 | 9 | import fsCurve from './fsCurve.glsl'; 10 | 11 | import vsCurveHead from './vsCurveHead.glsl'; 12 | import vsCurveMain from './vsCurveMain.glsl'; 13 | import vsCircleHead from './vsCircleHead.glsl'; 14 | import vsCircleMain from './vsCircleMain.glsl'; 15 | 16 | import vsLineArrowHead from './vsLineArrowHead.glsl'; 17 | import vsLineArrowMain from './vsLineArrowMain.glsl'; 18 | import vsCurveArrowHead from './vsCurveArrowHead.glsl'; 19 | import vsCurveArrowMain from './vsCurveArrowMain.glsl'; 20 | import vsCircleArrowHead from './vsCircleArrowHead.glsl'; 21 | import vsCircleArrowMain from './vsCircleArrowMain.glsl'; 22 | 23 | const vsLine = [vsLineHead, getShiftFuncs, vsLineMain].join('\n'); 24 | const vsCurve = [vsCurveHead, getShiftFuncs, vsCurveMain].join('\n'); 25 | const vsCircle = [vsCircleHead, getShiftFuncs, vsCircleMain].join('\n'); 26 | 27 | const vsLineArrow = [vsLineArrowHead, getShiftFuncs, vsLineArrowMain].join( 28 | '\n' 29 | ); 30 | const vsCurveArrow = [vsCurveArrowHead, getShiftFuncs, vsCurveArrowMain].join( 31 | '\n' 32 | ); 33 | const vsCircleArrow = [ 34 | vsCircleArrowHead, 35 | getShiftFuncs, 36 | vsCircleArrowMain, 37 | ].join('\n'); 38 | 39 | const shaders = { 40 | vsLine, 41 | fsLineBasic, 42 | vsCurve, 43 | fsCurve, 44 | vsCircle, 45 | fsCircle: fsCurve, 46 | vsLineArrow, 47 | fsColorTexture, 48 | vsCurveArrow, 49 | vsCircleArrow, 50 | }; 51 | 52 | export { shaders }; 53 | -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCircleArrowHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 direction; 3 | attribute vec2 textureCoord; 4 | attribute float offsetMul; 5 | uniform float offset; 6 | uniform vec2 arrowsize; 7 | uniform vec2 size; 8 | uniform vec2 screen; 9 | uniform float exc; 10 | uniform float aspect2; 11 | uniform mat4 transform; 12 | varying vec2 tc; -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCircleArrowMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 u = direction; 3 | vec2 v = vec2(direction.y, -direction.x); 4 | gl_Position = 5 | getShiftCurve() + getShiftCircle() + 6 | vec4((arrowsize.x * (0.5 - textureCoord.x) * v - 7 | arrowsize.y * textureCoord.y * u - offset * offsetMul * u) / 8 | screen, 9 | 0, 0) + 10 | transform * vec4(position, 0, 1); 11 | tc = textureCoord; 12 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCircleHead.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | attribute vec2 position; 3 | attribute vec2 normal; 4 | attribute vec2 curve; 5 | attribute vec2 lengthSoFar; 6 | uniform float exc; 7 | uniform vec2 screen; 8 | uniform float aspect2; 9 | uniform float aspect; 10 | uniform vec2 size; 11 | uniform mat4 transform; 12 | varying vec2 c; 13 | varying vec2 v_lengthSoFar; -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCircleMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | gl_Position = getShiftCurve() + getShiftCircle() + vec4(size * normal, 0, 0) + 3 | transform * vec4(position, 0, 1); 4 | c = curve; 5 | 6 | vec4 p = transform * vec4(size * lengthSoFar, 0, 0); 7 | v_lengthSoFar = vec2(p.x, p.y / aspect); 8 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCurveArrowHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 direction; 3 | attribute vec2 textureCoord; 4 | attribute float offsetMul; 5 | uniform float offset; 6 | uniform vec2 arrowsize; 7 | uniform vec2 size; 8 | uniform float exc; 9 | uniform float cexc; 10 | uniform vec2 screen; 11 | uniform float aspect2; 12 | uniform mat4 transform; 13 | varying vec2 tc; -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCurveArrowMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 u = normalize(vec2(direction.y, -aspect2 * direction.x)); 3 | u = normalize(direction - cexc * u / length(screen * u)); 4 | u = u / length(screen * u); 5 | vec2 v = vec2(u.y, -aspect2 * u.x); 6 | v = v / length(screen * v); 7 | gl_Position = 8 | getShiftCurve() + getShiftCircle() + 9 | vec4(arrowsize.x * (0.5 - textureCoord.x) * v - 10 | arrowsize.y * textureCoord.y * u - offset * offsetMul * u, 11 | 0, 0) + 12 | transform * vec4(position, 0, 1); 13 | tc = textureCoord; 14 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCurveHead.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | attribute vec2 position; 3 | attribute vec2 normal; 4 | attribute vec2 curve; 5 | attribute vec2 lengthSoFar; 6 | uniform vec2 size; 7 | uniform float exc; 8 | uniform vec2 screen; 9 | uniform float aspect2; 10 | uniform float aspect; 11 | uniform mat4 transform; 12 | varying vec2 v_lengthSoFar; 13 | varying vec2 c; -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsCurveMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 n = vec2(normal.x, aspect2 * normal.y); 3 | float length = length(screen * n); 4 | n = length == 0.0 ? vec2(0, 0) : n / length; 5 | gl_Position = getShiftCurve() + getShiftCircle() + vec4(exc * n, 0, 0) + 6 | transform * vec4(position, 0, 1); 7 | c = curve; 8 | 9 | vec4 p = transform * vec4(lengthSoFar, 0, 0); 10 | v_lengthSoFar = vec2(p.x, p.y / aspect); 11 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsLineArrowHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 direction; 3 | attribute vec2 textureCoord; 4 | attribute float offsetMul; 5 | uniform float offset; 6 | uniform vec2 arrowsize; 7 | uniform vec2 size; 8 | uniform vec2 screen; 9 | uniform float exc; 10 | uniform float aspect2; 11 | uniform mat4 transform; 12 | varying vec2 tc; -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsLineArrowMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 u = direction / length(screen * direction); 3 | vec2 v = vec2(u.y, -aspect2 * u.x); 4 | v = v / length(screen * v); 5 | gl_Position = 6 | getShiftCurve() + getShiftCircle() + 7 | vec4(arrowsize.x * (0.5 - textureCoord.x) * v - 8 | arrowsize.y * textureCoord.y * u - offset * offsetMul * u, 9 | 0, 0) + 10 | transform * vec4(position, 0, 1); 11 | tc = textureCoord; 12 | } -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsLineHead.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec2 position; 3 | attribute vec2 normal; 4 | attribute vec2 lengthSoFar; 5 | uniform float exc; 6 | uniform vec2 size; 7 | uniform vec2 screen; 8 | uniform float aspect2; 9 | uniform float aspect; 10 | uniform vec2 width; 11 | uniform mat4 transform; 12 | varying vec2 n; 13 | varying vec2 v_lengthSoFar; -------------------------------------------------------------------------------- /src/layer/plugins/edge/shaders/vsLineMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | gl_Position = getShiftCurve() + getShiftCircle() + vec4(width * normal, 0, 0) + transform * vec4(position, 0, 1); 3 | 4 | vec4 p = transform * vec4(lengthSoFar, 0, 0); 5 | v_lengthSoFar = vec2(p.x, p.y / aspect); 6 | 7 | n = normal; 8 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/fsLabelTexture.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform lowp sampler2D texture; 3 | uniform mediump vec4 color; 4 | uniform mediump float height_font; 5 | uniform float type; 6 | uniform float buffer; 7 | uniform float boldness; 8 | float gamma = 4.0 * 1.4142 * boldness / height_font; 9 | varying mediump vec2 tc; 10 | void main() { 11 | if(type > 0.5){ //SDF 12 | float tx=texture2D(texture, tc).a; 13 | float a= smoothstep(buffer - gamma, buffer + gamma, tx); 14 | gl_FragColor=vec4(color.rgb, a*color.a); 15 | }else{ //NORMAL FONT 16 | gl_FragColor = color * texture2D(texture, vec2(tc.s, tc.t)); 17 | } 18 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/fsLabelsBackgroundShader.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform vec4 backgroundColor; 3 | void main() { 4 | gl_FragColor = vec4(backgroundColor.r, backgroundColor.g, backgroundColor.b,1); 5 | } 6 | 7 | -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/fsLabelsBorder.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform vec4 borderColor; 3 | varying vec2 nB; 4 | void main() { 5 | gl_FragColor = vec4(borderColor.r, borderColor.g, borderColor.b, borderColor.a-length(nB)); 6 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsCircleLabelBorderMain.glsl: -------------------------------------------------------------------------------- 1 | 2 | void main(void) { 3 | vec4 shift = getShiftCurve() + getShiftCircle() + vec4(size * normal , 0, 0) ; 4 | vec4 pos = vec4(scale * (relative * fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) 5 | + transform * vec4(position, 0, 1); 6 | 7 | gl_Position = pos + shift + vec4(width * normalBorder, 0, 0) ; 8 | nB = normalBorder; 9 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsCircleLabelMain.glsl: -------------------------------------------------------------------------------- 1 | 2 | void main(void) { 3 | vec4 shift = getShiftCurve() + getShiftCircle() + vec4(size * normal , 0, 0) ; 4 | vec4 pos = vec4(scale * (relative * fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) 5 | + transform * vec4(position, 0, 1); 6 | 7 | gl_Position = pos + shift ; 8 | tc = textureCoord; 9 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsCircleLabelbgMain.glsl: -------------------------------------------------------------------------------- 1 | 2 | void main(void) { 3 | vec4 shift = getShiftCurve() + getShiftCircle() + vec4(size * normal , 0, 0) ; 4 | vec4 pos = vec4(scale * (relative * fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) 5 | + transform * vec4(position, 0, 1); 6 | gl_Position = pos + shift ; 7 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsCurveLabelBorderMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 n = vec2(normal.x, aspect2 * normal.y); 3 | float length = length(screen * n); 4 | n = length == 0.0 ? vec2(0, 0) : n / length; 5 | vec4 shift = getShiftCurve() + getShiftCircle() + vec4(( exc / 2.0 * n ), 0, 0) ; 6 | vec4 pos = vec4(scale * ( relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0)+ transform * vec4(position, 0, 1) ; 7 | 8 | gl_Position = pos + shift + vec4(width * normalBorder, 0, 0) ; 9 | nB = normalBorder; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsCurveLabelMain.glsl: -------------------------------------------------------------------------------- 1 | 2 | void main(void) { 3 | vec2 n = vec2(normal.x, aspect2 * normal.y); 4 | float length = length(screen * n); 5 | n = length == 0.0 ? vec2(0, 0) : n / length; 6 | 7 | vec4 shift = getShiftCurve() + getShiftCircle() + vec4(( exc / 2.0 * n ), 0, 0) ; 8 | vec4 pos = vec4(scale * ( relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) 9 | + transform * vec4(position, 0, 1); 10 | 11 | gl_Position = pos + shift; 12 | tc = textureCoord; 13 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsCurveLabelUtilityHead.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | attribute vec2 normal; 3 | uniform float exc; 4 | uniform vec2 screen; 5 | uniform float aspect2; 6 | uniform float aspect; 7 | uniform vec2 size; 8 | 9 | -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsCurveLabelbgMain.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec2 n = vec2(normal.x, aspect2 * normal.y); 3 | float length = length(screen * n); 4 | n = length == 0.0 ? vec2(0, 0) : n / length; 5 | 6 | vec4 shift = getShiftCurve() + getShiftCircle() + vec4(( exc / 2.0 * n ), 0, 0) ; 7 | vec4 pos = vec4(scale * ( relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) 8 | + transform * vec4(position, 0, 1) ; 9 | 10 | gl_Position = pos + shift; 11 | 12 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsDefaultLabel.glsl: -------------------------------------------------------------------------------- 1 | 2 | void main(void) { 3 | gl_Position = vec4(scale * (relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) + transform * vec4(position, 0, 1); 4 | tc = textureCoord; 5 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsDefaultLabelBorder.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | vec4 pos = vec4(scale * (relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) + transform * vec4(position, 0, 1); 3 | gl_Position = vec4(width * normalBorder, 0, 0) + pos; 4 | nB = normalBorder; 5 | } -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsDefaultLabelbg.glsl: -------------------------------------------------------------------------------- 1 | void main(void) { 2 | gl_Position = vec4(scale * (relative*fontScale + vec2(0, (2.0 * step(position.y, 0.5) - 1.0) * offset)), 0, 0) + transform * vec4(position, 0, 1); 3 | } 4 | -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsLabelBorderHead.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec2 relative; 3 | attribute vec2 position; 4 | attribute vec2 normalBorder; 5 | uniform vec2 width; 6 | uniform mat4 transform; 7 | uniform float fontScale; 8 | uniform float offset; 9 | uniform vec2 scale; 10 | varying vec2 nB; -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsLabelHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 relative; 3 | attribute vec2 textureCoord; 4 | attribute vec2 curve; 5 | uniform float offset; 6 | uniform vec2 scale; 7 | uniform float fontScale; 8 | uniform mat4 transform; 9 | varying vec2 tc; -------------------------------------------------------------------------------- /src/layer/plugins/label/shaders/vsLabelbgHead.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 relative; 3 | uniform vec2 scale; 4 | uniform mat4 transform; 5 | uniform float fontScale; 6 | uniform float offset; -------------------------------------------------------------------------------- /src/layer/plugins/node/index.js: -------------------------------------------------------------------------------- 1 | import BasePlugin from '../basePlugin'; 2 | 3 | import { Node, NodeColored } from './shape'; 4 | 5 | /** 6 | * Copyright (c) 2019, Helikar Lab. 7 | * All rights reserved. 8 | * 9 | * This source code is licensed under the GPLv3 License. 10 | * Authors: 11 | * Aleš Saska - http://alessaska.cz/ 12 | */ 13 | 14 | export default class NodePlugin extends BasePlugin { 15 | constructor(options) { 16 | super(options); 17 | 18 | const { gl, nodeStyle, getNodeSize } = options; 19 | 20 | this.scene.add('nodes', new Node(gl, nodeStyle, getNodeSize)); 21 | this.scene.add('nodesColored', new NodeColored(gl, nodeStyle, getNodeSize)); 22 | } 23 | runRegistrations({ gl, textures, drawEntities: { nodes } }) { 24 | let isDirty = false; 25 | 26 | let defaultAdder = (section, addSection) => { 27 | if (typeof section.style.texture === 'string') 28 | section.style.texture = textures.get( 29 | gl, 30 | section.style.texture, 31 | addSection 32 | ); 33 | else addSection(); 34 | }; 35 | 36 | if (nodes.length && !nodes[0].color) 37 | this.register('nodes', 'nodes', defaultAdder); 38 | else this.register('nodes', 'nodes', defaultAdder); 39 | 40 | return isDirty; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/layer/plugins/node/shaders/fsColorTexture.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform vec4 color; 3 | uniform sampler2D texture; 4 | varying vec2 tc; 5 | void main(void) { 6 | gl_FragColor = color * texture2D(texture, vec2(tc.s, tc.t)); 7 | } -------------------------------------------------------------------------------- /src/layer/plugins/node/shaders/fsVarColorTexture.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | uniform sampler2D texture; 3 | varying vec2 tc; 4 | varying vec4 c; 5 | void main(void) { 6 | gl_FragColor = c * texture2D(texture, vec2(tc.s, tc.t)); 7 | } -------------------------------------------------------------------------------- /src/layer/plugins/node/shaders/index.js: -------------------------------------------------------------------------------- 1 | import fsColorTexture from './fsColorTexture.glsl'; 2 | import fsVarColorTexture from './fsVarColorTexture.glsl'; 3 | import vsNode from './vsNode.glsl'; 4 | import vsNodeColored from './vsNodeColored.glsl'; 5 | 6 | const shaders = { 7 | vsNode, 8 | fsColorTexture, 9 | vsNodeColored, 10 | fsVarColorTexture, 11 | }; 12 | 13 | export { shaders }; 14 | -------------------------------------------------------------------------------- /src/layer/plugins/node/shaders/vsNode.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 textureCoord; 3 | uniform vec2 size; 4 | uniform mat4 transform; 5 | varying vec2 tc; 6 | void main(void) { 7 | gl_Position = vec4(size * (textureCoord - vec2(0.5, 0.5)), 0, 0) + 8 | transform * vec4(position, 0, 1); 9 | tc = textureCoord; 10 | } -------------------------------------------------------------------------------- /src/layer/plugins/node/shaders/vsNodeColored.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | attribute vec2 textureCoord; 3 | attribute vec4 color; 4 | uniform vec2 size; 5 | uniform mat4 transform; 6 | varying vec2 tc; 7 | varying vec4 c; 8 | void main(void) { 9 | gl_Position = vec4(size * (textureCoord - vec2(0.5, 0.5)), 0, 0) + 10 | transform * vec4(position, 0, 1); 11 | tc = textureCoord; 12 | c = color; 13 | } -------------------------------------------------------------------------------- /src/layer/plugins/node/shape.js: -------------------------------------------------------------------------------- 1 | import { BaseShape } from '../baseShape'; 2 | import ccNetViz_primitive from '../../../primitive'; 3 | import { shaders } from './shaders'; 4 | import ccNetViz_gl from '../../../gl'; 5 | 6 | const nodesFiller = style => ({ 7 | set: (v, e, iV, iI) => { 8 | let x = e.x; 9 | let y = e.y; 10 | ccNetViz_primitive.vertices(v.position, iV, x, y, x, y, x, y, x, y); 11 | ccNetViz_primitive.vertices(v.textureCoord, iV, 0, 0, 1, 0, 1, 1, 0, 1); 12 | if (v.color) { 13 | let c = e.color; 14 | ccNetViz_primitive.colors(v.color, iV, c, c, c, c); 15 | } 16 | ccNetViz_primitive.quad(v.indices, iV, iI); 17 | }, 18 | }); 19 | 20 | class Node extends BaseShape { 21 | constructor(gl, nodeStyle, getNodeSize) { 22 | super(); 23 | 24 | this.filler = nodesFiller; 25 | 26 | this._primitive = new ccNetViz_primitive( 27 | gl, 28 | nodeStyle, 29 | null, 30 | shaders.vsNode, 31 | shaders.fsColorTexture, 32 | c => { 33 | let size = getNodeSize(c); 34 | let uniforms = c.shader.uniforms; 35 | gl.uniform2f(uniforms.size, size / c.width, size / c.height); 36 | ccNetViz_gl.uniformColor(gl, uniforms.color, c.style.color); 37 | } 38 | ); 39 | } 40 | } 41 | 42 | class NodeColored extends BaseShape { 43 | constructor(gl, nodeStyle, getNodeSize) { 44 | super(); 45 | 46 | this.filler = nodesFiller; 47 | 48 | this._primitive = new ccNetViz_primitive( 49 | gl, 50 | nodeStyle, 51 | null, 52 | shaders.vsNodeColored, 53 | shaders.fsVarColorTexture, 54 | c => { 55 | let size = getNodeSize(c); 56 | let uniforms = c.shader.uniforms; 57 | gl.uniform2f(uniforms.size, size / c.width, size / c.height); 58 | } 59 | ); 60 | } 61 | } 62 | 63 | export { Node, NodeColored }; 64 | -------------------------------------------------------------------------------- /src/layer/util.js: -------------------------------------------------------------------------------- 1 | const normalize = (a, b) => { 2 | let x = b.x - a.x; 3 | let y = b.y - a.y; 4 | let sc = 1 / Math.sqrt(x * x + y * y); 5 | return { x: sc * x, y: sc * y }; 6 | }; 7 | 8 | export { normalize }; 9 | -------------------------------------------------------------------------------- /src/layout/grid.js: -------------------------------------------------------------------------------- 1 | import ccNetViz_utils from '../utils'; 2 | import { degrees } from './utils'; 3 | 4 | export default class { 5 | constructor(nodes, edges, layout_options) { 6 | this._nodes = nodes; 7 | this._edges = edges; 8 | let defaults = { 9 | margin: 0.05, 10 | direction: 'left-right', 11 | }; 12 | ccNetViz_utils.extend(defaults, layout_options); 13 | this._options = defaults; 14 | } 15 | apply() { 16 | let nd = degrees(this._nodes, this._edges); 17 | const sq = Math.sqrt(this._nodes.length); 18 | const reminder = sq - Math.floor(sq); 19 | if (reminder > 0) var nnodes = Math.floor(sq) + 1; 20 | else var nnodes = sq; 21 | const step = 1 / nnodes; 22 | 23 | const nlines = this._nodes.length / nnodes; 24 | const reminder2 = nlines - Math.floor(nlines); 25 | if (reminder2 > 0) var nlines2 = Math.floor(nlines) + 1; 26 | else var nlines2 = nlines; 27 | const stepy = 1 / (nlines2 - 2); 28 | for (let i = 0; i < this._nodes.length; ++i) { 29 | let j = Math.floor(i / (nnodes + 1)); 30 | this._nodes[nd.nodes[i].index].x = step * (i - j * (nnodes + 1)); 31 | this._nodes[nd.nodes[i].index].y = stepy * j; 32 | this._nodes[nd.nodes[i].index].weight = nd.degrees[i]; 33 | } 34 | return this._options; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/layout/random.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2016, Helikar Lab. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the GPLv3 License. 6 | * Author: David Tichy 7 | */ 8 | 9 | import ccNetViz_utils from '../utils'; 10 | 11 | export default class { 12 | constructor(nodes, layout_options) { 13 | this._nodes = nodes; 14 | let defaults = { 15 | margin: 0.05, 16 | direction: 'left-right', 17 | }; 18 | ccNetViz_utils.extend(defaults, layout_options); 19 | this._options = defaults; 20 | } 21 | 22 | apply() { 23 | for (let i = 0, n = this._nodes.length; i < n; i++) { 24 | let o = this._nodes[i]; 25 | o.x = Math.random(); 26 | o.y = Math.random(); 27 | } 28 | return this._options; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/lazyEvents.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2016, Helikar Lab. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the GPLv3 License. 6 | * Authors: David Tichy, Aleš Saska 7 | */ 8 | 9 | export default class { 10 | constructor(){ 11 | this._enable = true; 12 | } 13 | 14 | debounce(func, wait, immediate) { 15 | let timeout, args, context, timestamp, result; 16 | 17 | let later = () => { 18 | let last = Date.now - timestamp; 19 | 20 | if (last < wait && last > 0) { 21 | timeout = setTimeout(later, wait - last); 22 | } else { 23 | timeout = null; 24 | if (!immediate) { 25 | if(this._enable){ 26 | result = func.apply(context, args); 27 | } 28 | if (!timeout) context = args = null; 29 | } 30 | } 31 | }; 32 | 33 | return () => { 34 | context = this; 35 | args = arguments; 36 | timestamp = Date.now; 37 | let callNow = immediate && !timeout; 38 | if (!timeout) timeout = setTimeout(later, wait); 39 | if (callNow) { 40 | if(this._enable){ 41 | result = func.apply(context, args); 42 | } 43 | context = args = null; 44 | } 45 | 46 | return result; 47 | }; 48 | } 49 | 50 | disable(){ 51 | this._enable = false; 52 | } 53 | }; -------------------------------------------------------------------------------- /src/primitiveTools.js: -------------------------------------------------------------------------------- 1 | import ccNetViz_color from './color' ; 2 | 3 | function partitionByStyle(data){ 4 | let parts = {}; 5 | 6 | let pN = {}; 7 | for (let i = 0; i < data.length; i++) { 8 | let el = data[i]; 9 | let part = parts[el.style] = parts[el.style] || []; 10 | if(part.idx === undefined) 11 | part.idx = []; 12 | part.idx.push(i); 13 | 14 | el.sI = pN[el.style] = pN[el.style] === undefined ? 0 : pN[el.style]+1; 15 | 16 | part.push(el); 17 | } 18 | 19 | return parts; 20 | } 21 | 22 | function getPartitionStyle(style, baseStyle, styleProperty){ 23 | let result = {}; 24 | 25 | let copy = s => { 26 | if (s) for (let p in s) result[p] = s[p]; 27 | }; 28 | 29 | copy(baseStyle); 30 | copy(style); 31 | 32 | if (styleProperty) { 33 | copy(baseStyle[styleProperty]); 34 | style && copy(style[styleProperty]); 35 | } 36 | result.color = result.color && new ccNetViz_color(result.color); 37 | result.animateColor = result.animateColor && new ccNetViz_color(result.animateColor); 38 | return result; 39 | }; 40 | 41 | 42 | export {partitionByStyle, getPartitionStyle}; -------------------------------------------------------------------------------- /src/shader.js: -------------------------------------------------------------------------------- 1 | import ccNetViz_gl from './gl' ; 2 | 3 | /** 4 | * Copyright (c) 2016, Helikar Lab. 5 | * All rights reserved. 6 | * 7 | * This source code is licensed under the GPLv3 License. 8 | * Author: David Tichy 9 | */ 10 | 11 | var defaultAttr = {color: 4}; 12 | 13 | export default class Shader { 14 | constructor(gl, vs, fs, shaderParams) { 15 | this._gl = gl; 16 | this._vs = vs; 17 | this._fs = fs; 18 | 19 | let program = this._program = gl.createProgram(); 20 | 21 | gl.attachShader(program, ccNetViz_gl.createShader(gl, gl.VERTEX_SHADER, vs)); 22 | gl.attachShader(program, ccNetViz_gl.createShader(gl, gl.FRAGMENT_SHADER, fs)); 23 | gl.linkProgram(program); 24 | 25 | this.uniforms = {}; 26 | let n = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); 27 | for (let i = 0; i < n; i++) { 28 | let name = gl.getActiveUniform(program, i).name; 29 | this.uniforms[name] = gl.getUniformLocation(program, name); 30 | } 31 | 32 | let attrParams = (shaderParams || {}).attribute || {}; 33 | 34 | this.attributes = {}; 35 | n = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES); 36 | for (let i = 0; i < n; i++) { 37 | let name = gl.getActiveAttrib(program, i).name; 38 | this.attributes[name] = { index: i, size: attrParams[name] || Shader.attribute[name] || 2 }; 39 | } 40 | 41 | } 42 | 43 | static get attribute(){ 44 | return defaultAttr; 45 | } 46 | 47 | bind () { 48 | this._gl.useProgram(this._program); 49 | 50 | let n = this._gl.getProgramParameter(this._program, this._gl.ACTIVE_ATTRIBUTES); 51 | for (let i = 0; i < n; i++) this._gl.enableVertexAttribArray(i); 52 | } 53 | 54 | unbind () { 55 | let n = this._gl.getProgramParameter(this._program, this._gl.ACTIVE_ATTRIBUTES); 56 | for (let i = 0; i < n; i++) this._gl.disableVertexAttribArray(i); 57 | } 58 | 59 | }; -------------------------------------------------------------------------------- /src/texts/texts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2016, Helikar Lab. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the GPLv3 License. 6 | * Authors: David Tichy, Aleš Saska 7 | */ 8 | 9 | import ccNetViz_defaultTexts from './default'; 10 | import ccNetViz_sdfTexts from './sdf/sdf'; 11 | import ccNetViz_utils from '../utils'; 12 | 13 | export default class { 14 | constructor(gl, files, textures){ 15 | this._gl = gl; 16 | 17 | this._modules = { 18 | 'default': new ccNetViz_defaultTexts(gl, files, textures), 19 | 'sdf': new ccNetViz_sdfTexts(gl, files, textures), 20 | }; 21 | } 22 | 23 | clear() { 24 | for(let k in this._modules){ 25 | this._modules[k].clear(); 26 | } 27 | } 28 | 29 | isSDF(font){ 30 | if(ccNetViz_utils.isObject(font)){ 31 | if(font.type === 'sdf'){ 32 | return true; 33 | } 34 | } 35 | return false; 36 | } 37 | 38 | getEngine(font) { 39 | if(this.isSDF(font)){ 40 | return this._modules.sdf; 41 | } 42 | return this._modules.default; 43 | } 44 | 45 | bind () { 46 | for(let k in this._modules){ 47 | this._modules[k].bind(); 48 | } 49 | } 50 | 51 | remove () { 52 | for(let k in this._modules){ 53 | this._modules[k].remove && this._modules[k].remove(); 54 | } 55 | } 56 | 57 | }; -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2016, Helikar Lab. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the GPLv3 License. 6 | * Authors: David Tichy, Aleš Saska 7 | */ 8 | 9 | export default class Utils { 10 | static extend(from){ 11 | for(var i = 1; i < arguments.length; i++){ 12 | for(var k in arguments[i]){ 13 | from[k] = arguments[i][k]; 14 | } 15 | } 16 | return from; 17 | } 18 | 19 | static isObject (obj) { 20 | return obj === Object(obj); 21 | } 22 | 23 | static emptyObject(obj) { 24 | if(!Utils.isObject(obj)) 25 | return false; 26 | 27 | for(var k in obj) 28 | return false; 29 | return true; 30 | } 31 | 32 | static ajax(url, callback, type){ 33 | var xmlhttp; 34 | // compatible with IE7+, Firefox, Chrome, Opera, Safari 35 | xmlhttp = new XMLHttpRequest(); 36 | xmlhttp.onreadystatechange = (function(cbk){ 37 | return function(){ 38 | if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 39 | cbk(type == 'arraybuffer' ? xmlhttp.response : xmlhttp.responseText); 40 | } 41 | } 42 | })(callback); 43 | if(type) xmlhttp.responseType=type; 44 | xmlhttp.open("GET", url, true); 45 | xmlhttp.send(); 46 | } 47 | 48 | }; -------------------------------------------------------------------------------- /tests/performance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Performance tests 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /tests/unit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ccNetViz test page 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | entry: ['babel-polyfill', './src/entrypoint.js'], 5 | output: { 6 | path: path.join(__dirname, 'lib'), 7 | filename: 'ccNetViz.js', 8 | libraryTarget: 'umd', 9 | }, 10 | devtool: 'source-map', 11 | module: { 12 | rules: [ 13 | // Babel Loader 14 | { 15 | exclude: /(node_modules|bower_components)/, 16 | test: /\.js$/, 17 | loader: 'babel-loader', 18 | }, 19 | // GLSL Loader 20 | { 21 | test: /\.glsl$/, 22 | use: { loader: 'raw-loader' }, 23 | }, 24 | ], 25 | }, 26 | }; 27 | --------------------------------------------------------------------------------