diff options
| author | Sébastien Dailly <sebastien@dailly.me> | 2022-02-07 15:38:37 +0100 |
|---|---|---|
| committer | Sébastien Dailly <sebastien@dailly.me> | 2022-02-07 16:01:12 +0100 |
| commit | 77544bdfad2af41514ec1435f706fee87ea2969e (patch) | |
| tree | 4de23870e08711da25ff92e9670370fc0a74e459 /viz.js/index.html | |
| parent | ad526111f0dd619ae9e0e98ef2253146b58a068f (diff) | |
Added viz.js code
Diffstat (limited to 'viz.js/index.html')
| -rwxr-xr-x | viz.js/index.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/viz.js/index.html b/viz.js/index.html new file mode 100755 index 0000000..abb158c --- /dev/null +++ b/viz.js/index.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Graph editor</title> + <style> + + #app { + display: flex; + display: -webkit-flex; + flex-direction: column; + -webkit-flex-direction: column; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + #panes { + display: flex; + display: -webkit-flex; + flex: 1 1 auto; + -webkit-flex: 1 1 auto; + } + + #graph { + display: flex; + display: -webkit-flex; + flex-direction: column; + -webkit-flex-direction: column; + } + + #output { + flex: 1 1 auto; + -webkit-flex: 1 1 auto; + position: relative; + overflow: auto; + } + + #editor { + width : 40%; + border-right: 1px solid #ccc; + } + + #output svg { + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + #output #text { + font-size: 12px; + white-space: pre; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + } + + #output.working svg, #output.error svg, + #output.working #text, #output.error #text, + #output.working img, #output.error img { + opacity: 0.4; + } + + #output.error #error { + display: inherit; + } + + .split { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + + overflow-y: auto; + overflow-x: hidden; + } + + .split.split-horizontal, .gutter.gutter-horizontal { + height: 100%; + float: left; + } + + </style> + </head> + <body> + + <div id="app"> + <div id="panes" class="split split-horizontal"> + <textarea id="editor"></textarea> + <div id="graph" class="split"> + <div id="output"> + <button id="dot_output">Export DOT</button> + <button id="png_output">Export PNG</button> + <button id="btn_window">Isoler</button> + <div id="svg"></div> + </div> + </div> + </div> + </div> + + <script src="download.js"></script> + <script src="convert.js"></script> + </body> +</html> + |