rpd
Version:
RPD is a minimal framework for building Node-Based User Interfaces, powered by Reactive Programming
112 lines (85 loc) • 3.8 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<!-- gulp html-head ==style quartz ==renderer svg ==toolkit util ==root .. -->
<!-- Built with RPD v2.0.0 <http://shamansir.github.io/rpd> -->
<!-- RPD Renderer: html -->
<link rel="stylesheet" href="../src/render/svg.css"></style>
<!-- RPD Style: compact-v (svg) -->
<link rel="stylesheet" href="../src/style/compact-v/svg.css"></style>
<!-- RPD Toolkit: util (svg) -->
<link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
<link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css"></style>
<!-- Kefir -->
<script src="../node_modules/kefir/dist/kefir.min.js"></script>
<!-- d3-selection -->
<script src="../node_modules/d3-selection/build/d3-selection.min.js"></script>
<!-- RPD -->
<script src="../src/rpd.js"></script>
<!-- RPD Rendering Engine: -->
<script src="../src/render/shared.js"></script>
<!-- RPD Style: compact-v (svg) -->
<script src="../src/style/compact-v/svg.js"></script>
<!-- RPD Renderer: svg -->
<script src="../src/render/svg.js"></script>
<!-- RPD Toolkit: util -->
<script src="../src/toolkit/util/shared.js"></script>
<script src="../src/toolkit/util/toolkit.js"></script>
<!-- RPD Toolkit: util (svg) -->
<script src="../src/toolkit/util/svg.js"></script>
<script src="../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #eee;
}
#codemirror-target {
border-bottom: 1px solid #22222f;
}
</style>
</head>
<body>
<div id="codemirror-target"></div>
<button id="run-button">Run</button>
<div id="patch-target" style="height: 400px;"></div>
<script>
var codemirror = CodeMirror(document.getElementById('codemirror-target'));
var runButton = document.getElementById('run-button');
var patchTarget = document.getElementById('patch-target');
function HorzPlacing() {
this.lastX = 10;
}
HorzPlacing.prototype.nextPosition = function(node, size, limits) {
var nextPos = { x: this.lastX, y: 10 };
this.lastX += size.width + 10;
return nextPos;
}
Rpd.Render.Placing = HorzPlacing;
var firstCode = 'patch.addNode(\'util/nodelist\');\n' +
'patch.addNode(\'util/metro\');';
codemirror.setValue(firstCode);
cleanAndRun(firstCode);
Kefir.fromEvents(runButton, 'click').onValue(function() {
cleanAndRun(codemirror.getValue());
});
function cleanAndRun(code) {
while (patchTarget.firstChild) {
patchTarget.removeChild(patchTarget.firstChild);
}
var patch = Rpd.addPatch().render('svg', patchTarget,
{ style: 'compact-v', linkForm: 'curve' });
patch.resizeCanvas('100%', '100%');
window.patch = patch;
window.codemirror = codemirror;
eval(code);
}
function _createSvgElement(name) {
return document.createElementNS('http://www.w3.org/2000/svg', name);
}
</script>
</body>
</html>