Created
December 31, 2016 00:14
-
-
Save apla/76e53a3246470b45221e770c9c6282c2 to your computer and use it in GitHub Desktop.
test for a linked graphs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .shadergraph-graph { | |
| font: 12px sans-serif; | |
| line-height: 25px; | |
| position: relative; | |
| } | |
| .shadergraph-graph:after { | |
| content: ' '; | |
| display: block; | |
| height: 0; | |
| font-size: 0; | |
| clear: both; | |
| } | |
| .shadergraph-graph svg { | |
| pointer-events: none; | |
| } | |
| .shadergraph-clear { | |
| clear: both; | |
| } | |
| .shadergraph-graph svg { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: auto; | |
| height: auto; | |
| } | |
| .shadergraph-column { | |
| float: left; | |
| } | |
| .shadergraph-node .shadergraph-graph { | |
| float: left; | |
| clear: both; | |
| overflow: visible; | |
| } | |
| .shadergraph-node .shadergraph-graph .shadergraph-node { | |
| margin: 5px 15px 15px; | |
| } | |
| .shadergraph-node { | |
| margin: 5px 15px 25px; | |
| background: rgba(0, 0, 0, .1); | |
| border-radius: 5px; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, .2), | |
| 0 1px 10px rgba(0, 0, 0, .2); | |
| min-height: 35px; | |
| float: left; | |
| clear: left; | |
| position: relative; | |
| } | |
| .shadergraph-type { | |
| font-weight: bold; | |
| } | |
| .shadergraph-header { | |
| font-weight: bold; | |
| text-align: center; | |
| height: 25px; | |
| background: rgba(0, 0, 0, .3); | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, .25); | |
| color: #fff; | |
| border-top-left-radius: 5px; | |
| border-top-right-radius: 5px; | |
| margin-bottom: 5px; | |
| padding: 0 10px; | |
| } | |
| .shadergraph-outlet div { | |
| } | |
| .shadergraph-outlet-in .shadergraph-name { | |
| margin-right: 7px; | |
| } | |
| .shadergraph-outlet-out .shadergraph-name { | |
| margin-left: 7px; | |
| } | |
| .shadergraph-name { | |
| margin: 0 4px; | |
| } | |
| .shadergraph-point { | |
| margin: 6px; | |
| width: 11px; | |
| height: 11px; | |
| border-radius: 7.5px; | |
| background: rgba(255, 255, 255, 1); | |
| } | |
| .shadergraph-outlet-in { | |
| float: left; | |
| clear: left; | |
| } | |
| .shadergraph-outlet-in div { | |
| float: left; | |
| } | |
| .shadergraph-outlet-out { | |
| float: right; | |
| clear: right; | |
| } | |
| .shadergraph-outlet-out div { | |
| float: right; | |
| } | |
| .shadergraph-node-callback { | |
| background: rgba(205, 209, 221, .5); | |
| box-shadow: 0 1px 2px rgba(0, 10, 40, .2), | |
| 0 1px 10px rgba(0, 10, 40, .2); | |
| } | |
| .shadergraph-node-callback > .shadergraph-header { | |
| background: rgba(0, 20, 80, .3); | |
| } | |
| .shadergraph-graph .shadergraph-graph .shadergraph-node-callback { | |
| background: rgba(0, 20, 80, .1); | |
| } | |
| .shadergraph-node-call { | |
| background: rgba(209, 221, 205, .5); | |
| box-shadow: 0 1px 2px rgba(10, 40, 0, .2), | |
| 0 1px 10px rgba(10, 40, 0, .2); | |
| } | |
| .shadergraph-node-call > .shadergraph-header { | |
| background: rgba(20, 80, 0, .3); | |
| } | |
| .shadergraph-graph .shadergraph-graph .shadergraph-node-call { | |
| background: rgba(20, 80, 0, .1); | |
| } | |
| .shadergraph-node-isolate { | |
| background: rgba(221, 205, 209, .5); | |
| box-shadow: 0 1px 2px rgba(40, 0, 10, .2), | |
| 0 1px 10px rgba(40, 0, 10, .2); | |
| } | |
| .shadergraph-node-isolate > .shadergraph-header { | |
| background: rgba(80, 0, 20, .3); | |
| } | |
| .shadergraph-graph .shadergraph-graph .shadergraph-node-isolate { | |
| background: rgba(80, 0, 20, .1); | |
| } | |
| .shadergraph-node.shadergraph-has-code { | |
| cursor: pointer; | |
| } | |
| .shadergraph-node.shadergraph-has-code::before { | |
| position: absolute; | |
| content: ' '; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: none; | |
| border: 2px solid rgba(0, 0, 0, .25); | |
| border-radius: 5px; | |
| } | |
| .shadergraph-node.shadergraph-has-code:hover::before { | |
| display: block; | |
| } | |
| .shadergraph-code { | |
| z-index: 10000; | |
| display: none; | |
| position: absolute; | |
| background: #fff; | |
| color: #000; | |
| white-space: pre; | |
| padding: 10px; | |
| border-radius: 5px; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, .2), | |
| 0 1px 10px rgba(0, 0, 0, .2); | |
| font-family: monospace; | |
| font-size: 10px; | |
| line-height: 12px; | |
| } | |
| .shadergraph-overlay { | |
| position: fixed; | |
| top: 50%; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: #fff; | |
| border-top: 1px solid #CCC; | |
| } | |
| .shadergraph-overlay .shadergraph-view { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| overflow: auto; | |
| } | |
| .shadergraph-overlay .shadergraph-inside { | |
| width: 4000px; | |
| min-height: 100%; | |
| box-sizing: border-box; | |
| } | |
| .shadergraph-overlay .shadergraph-close { | |
| position: absolute; | |
| top: 5px; | |
| right: 5px; | |
| padding: 4px; | |
| border-radius: 16px; | |
| background: rgba(255,255,255,.3); | |
| color: rgba(0, 0, 0, .3); | |
| cursor: pointer; | |
| font-size: 24px; | |
| line-height: 24px; | |
| width: 24px; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| .shadergraph-overlay .shadergraph-close:hover { | |
| background: rgba(255,255,255,1); | |
| color: rgba(0, 0, 0, 1); | |
| } | |
| .shadergraph-overlay .shadergraph-graph { | |
| padding-top: 10px; | |
| overflow: visible; | |
| min-height: 100%; | |
| } | |
| .shadergraph-overlay span { | |
| display: block; | |
| padding: 5px 15px; | |
| margin: 0; | |
| background: rgba(0, 0, 0, .1); | |
| font-weight: bold; | |
| font-family: sans-serif; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.2.1/d3.js"></script> | |
| <link crossorigin="anonymous" href="index.css" media="all" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div class="graph"><div class="shadergraph-graph"><div class="shadergraph-column"><div class="shadergraph-node shadergraph-node-callback"><div class="shadergraph-header">Callback</div><div class="shadergraph-outlet shadergraph-outlet-out"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">callback</div></div><div class="shadergraph-graph"><div class="shadergraph-column"><div class="shadergraph-node shadergraph-node-call shadergraph-has-code"><div class="shadergraph-header">getColor</div><div class="shadergraph-outlet shadergraph-outlet-out"><div class="shadergraph-point" style="background: rgba(66, 97, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(66, 97, 140, 1)">v3</div> | |
| <div class="shadergraph-name">return</div></div><div class="shadergraph-clear"></div><div class="shadergraph-code" style="display: none;">vec3 getColor() { | |
| return vec3(0.2, 0.3, 0.4); | |
| }</div></div></div></div></div><div class="shadergraph-node shadergraph-node-callback"><div class="shadergraph-header">Callback</div><div class="shadergraph-outlet shadergraph-outlet-out"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">callback</div></div><div class="shadergraph-graph"><div class="shadergraph-column"><div class="shadergraph-node shadergraph-node-call shadergraph-has-code"><div class="shadergraph-header">getColor</div><div class="shadergraph-outlet shadergraph-outlet-out"><div class="shadergraph-point" style="background: rgba(66, 97, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(66, 97, 140, 1)">v3</div> | |
| <div class="shadergraph-name">return</div></div><div class="shadergraph-clear"></div><div class="shadergraph-code" style="display: none;">vec3 getColor() { | |
| return vec3(0.2, 0.3, 0.4); | |
| }</div></div></div></div></div></div><div class="shadergraph-column"><div class="shadergraph-node shadergraph-node-callback"><div class="shadergraph-header">Callback</div><div class="shadergraph-outlet shadergraph-outlet-in"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">_io_6_getColor1</div></div><div class="shadergraph-outlet shadergraph-outlet-in"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">_io_7_getColor2</div></div><div class="shadergraph-outlet shadergraph-outlet-out"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">callback</div></div><div class="shadergraph-graph"><div class="shadergraph-column"><div class="shadergraph-node shadergraph-node-call shadergraph-has-code"><div class="shadergraph-header">getColorSum</div><div class="shadergraph-outlet shadergraph-outlet-in"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">getColor1</div></div><div class="shadergraph-outlet shadergraph-outlet-in"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">getColor2</div></div><div class="shadergraph-outlet shadergraph-outlet-out"><div class="shadergraph-point" style="background: rgba(66, 97, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(66, 97, 140, 1)">v3</div> | |
| <div class="shadergraph-name">return</div></div><div class="shadergraph-clear"></div><div class="shadergraph-code" style="display: block;">vec3 getColor1(); | |
| vec3 getColor2(); | |
| vec3 getColorSum() { | |
| return getColor1() + getColor2(); | |
| }</div></div></div></div></div></div><div class="shadergraph-column"><div class="shadergraph-node shadergraph-node-call shadergraph-has-code"><div class="shadergraph-header">setColor</div><div class="shadergraph-outlet shadergraph-outlet-in"><div class="shadergraph-point" style="background: rgba(80, 70, 140, 1)"></div> | |
| <div class="shadergraph-type" style="color: rgba(80, 70, 140, 1)">→(v3)</div> | |
| <div class="shadergraph-name">getColor</div></div><div class="shadergraph-clear"></div><div class="shadergraph-code" style="display: none;">vec3 getColor(); | |
| void main() { | |
| gl_FragColor = vec4(getColor(), 1.0); | |
| }</div></div></div><svg width="1347" height="320"><path d="M 114.203125 46.5 C 135.403125 46.5, 146.003125 46.5, 167.203125 46.5" stroke="rgba(80, 70, 140, 1)" stroke-width="3" fill="transparent"></path><path d="M 114.203125 206.5 C 140.703125 206.5, 140.703125 182.50930934868995 140.703125 139 C 140.703125 95.49069065131005 140.703125 71.5, 167.203125 71.5" stroke="rgba(80, 70, 140, 1)" stroke-width="3" fill="transparent"></path><path d="M 410.328125 71.5 C 431.528125 71.5, 442.128125 46.5, 463.328125 46.5" stroke="rgba(80, 70, 140, 1)" stroke-width="3" fill="transparent"></path></svg></div></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment