diff options
| author | n-peugnet <n.peugnet@free.fr> | 2020-03-22 16:30:35 +0100 |
|---|---|---|
| committer | n-peugnet <n.peugnet@free.fr> | 2020-03-22 16:30:35 +0100 |
| commit | 87f75ea2869629fedf893942b767765eff40c597 (patch) | |
| tree | db32952c6c15beb48ae45bb73c687d7baa60b330 | |
| parent | d1e35a91b70c88a888cb3a3cfb849b6ddd70bb22 (diff) | |
| download | wcms-87f75ea2869629fedf893942b767765eff40c597.tar.gz wcms-87f75ea2869629fedf893942b767765eff40c597.zip | |
very first graph displayed using cytoscape
| -rw-r--r-- | app/class/Modelhome.php | 2 | ||||
| -rw-r--r-- | app/view/templates/map.php | 16 | ||||
| -rw-r--r-- | src/map.js | 9 | ||||
| -rw-r--r-- | webpack.config.js | 1 |
4 files changed, 24 insertions, 4 deletions
diff --git a/app/class/Modelhome.php b/app/class/Modelhome.php index 37eb549..2aedae3 100644 --- a/app/class/Modelhome.php +++ b/app/class/Modelhome.php @@ -156,7 +156,7 @@ class Modelhome extends Modelpage } $datas['elements'] = array_merge($nodes, $edges); - $datas['layout']['name'] = 'preset'; + $datas['layout']['name'] = 'random'; $datas['style'] = [ 'selector' => 'node', 'style' => [ diff --git a/app/view/templates/map.php b/app/view/templates/map.php index 236ff8e..83e6004 100644 --- a/app/view/templates/map.php +++ b/app/view/templates/map.php @@ -1,5 +1,15 @@ -<pre> +<style> + #graph { + height: 100%; + width: 100%; + } +</style> - <?= $json ?> +<div id="graph"></div> -</pre>
\ No newline at end of file +<script> + var data = <?= $json ?>; + console.log(data); +</script> + +<script src="<?= Wcms\Model::jspath() ?>map.bundle.js"></script>
\ No newline at end of file diff --git a/src/map.js b/src/map.js new file mode 100644 index 0000000..5561250 --- /dev/null +++ b/src/map.js @@ -0,0 +1,9 @@ +import cytoscape from 'cytoscape'; + +let options = { + container: document.getElementById('graph'), +}; + +Object.assign(options, data); + +let cy = cytoscape(options); diff --git a/webpack.config.js b/webpack.config.js index 1c38b9b..f6af5a3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -16,6 +16,7 @@ module.exports = (env) => { entry: { edit: './src/edit.js', home: './src/home.js', + map: './src/map.js', media: './src/media.js', sentry: './src/sentry.js', }, |