mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-22 11:08:35 +00:00
remove graphviz
This commit is contained in:
Felix Roos
parent
a9fa6f14fb
commit
5f8da04cd8
96
examples/buildless/tidal.html
Normal file
96
examples/buildless/tidal.html
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>tidal.html</title>
|
||||||
|
</head>
|
||||||
|
<body style="margin: 0; padding: 0">
|
||||||
|
<textarea id="code" style="width: 100%; height: 200px"></textarea>
|
||||||
|
<pre id="result"></pre>
|
||||||
|
<script src="https://unpkg.com/hs2js@latest"></script>
|
||||||
|
<script src="https://unpkg.com/@strudel/web@latest"></script>
|
||||||
|
<script>
|
||||||
|
const { initStrudel } = strudel;
|
||||||
|
const { run, parse, setBase } = hs2js;
|
||||||
|
setBase('https://unpkg.com/hs2js@0.0.4/dist/');
|
||||||
|
initStrudel({
|
||||||
|
prebake: () => samples('github:tidalcycles/dirt-samples'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const textarea = document.getElementById('code');
|
||||||
|
if (window.location.hash) {
|
||||||
|
textarea.value = atob(window.location.hash.slice(1));
|
||||||
|
} else {
|
||||||
|
textarea.value = 'd1 $ s "jvbass(3,8)"';
|
||||||
|
}
|
||||||
|
textarea.addEventListener('input', (e) => {
|
||||||
|
window.location.hash = btoa(e.target.value);
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
update();
|
||||||
|
|
||||||
|
function getInfixOperators() {
|
||||||
|
let operators = {
|
||||||
|
'>': 'set',
|
||||||
|
'#': 'set',
|
||||||
|
'+': 'add',
|
||||||
|
'-': 'sub',
|
||||||
|
'*': 'mul',
|
||||||
|
'/': 'div',
|
||||||
|
};
|
||||||
|
let alignments = {
|
||||||
|
in: (s) => '|' + s,
|
||||||
|
out: (s) => s + '|',
|
||||||
|
mix: (s) => '|' + s + '|',
|
||||||
|
};
|
||||||
|
let ops = {};
|
||||||
|
Object.entries(operators).forEach(([o, name]) => {
|
||||||
|
// operator without alignment
|
||||||
|
ops[o] = (l, r) => reify(l)[name](reify(r));
|
||||||
|
Object.entries(alignments).forEach(([a, getSymbol]) => {
|
||||||
|
// get symbol with alignment
|
||||||
|
let symbol = getSymbol(o);
|
||||||
|
ops[symbol] = (l, r) => reify(l)[name][a](reify(r));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ops['~>'] = (l, r) => reify(l).late(reify(r));
|
||||||
|
ops['<~'] = (l, r) => reify(l).early(reify(r));
|
||||||
|
ops['<$>'] = (l, r) => reify(r).fmap(l).outerJoin(); // is this right?
|
||||||
|
return ops;
|
||||||
|
}
|
||||||
|
const ops = getInfixOperators();
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
let result, tree;
|
||||||
|
try {
|
||||||
|
tree = await parse(textarea.value);
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('parse error');
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
console.log('parsed tree');
|
||||||
|
console.log(tree.rootNode.toString());
|
||||||
|
try {
|
||||||
|
let patterns = {};
|
||||||
|
window.p = (name, pattern) => {
|
||||||
|
patterns[name] = pattern;
|
||||||
|
};
|
||||||
|
window.d1 = (pat) => window.p(1, pat);
|
||||||
|
window.d2 = (pat) => window.p(2, pat);
|
||||||
|
window.d3 = (pat) => window.p(3, pat);
|
||||||
|
window.rot = late;
|
||||||
|
result = run(tree.rootNode, window, ops);
|
||||||
|
if (Object.values(patterns).length) {
|
||||||
|
stack(...Object.values(patterns)).play();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('eval error');
|
||||||
|
console.error(err);
|
||||||
|
result = 'ERROR: ' + err.message;
|
||||||
|
}
|
||||||
|
document.getElementById('result').innerHTML = 'Result: ' + result;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import { Graphviz } from '@hpcc-js/wasm';
|
|
||||||
import toDot from 'jgf-dot';
|
|
||||||
|
|
||||||
const graphvizLoaded = Graphviz.load();
|
|
||||||
|
|
||||||
function walk(node, branch = [0], parent) {
|
|
||||||
let nodes = [];
|
|
||||||
let edges = [];
|
|
||||||
const color = 'white';
|
|
||||||
const current = {
|
|
||||||
id: branch.join('-'),
|
|
||||||
color,
|
|
||||||
fontcolor: color,
|
|
||||||
label: node.type.replace('\\', 'lambda'), // backslash kills graphviz..
|
|
||||||
};
|
|
||||||
nodes.push(current);
|
|
||||||
parent && edges.push({ source: parent.id, target: current.id, color });
|
|
||||||
if (node.children.length) {
|
|
||||||
node.children.forEach((child, j) => {
|
|
||||||
const { nodes: childNodes, edges: childEdges } = walk(child, branch.concat([j]), current);
|
|
||||||
nodes = nodes.concat(childNodes || []);
|
|
||||||
edges = edges.concat(childEdges || []);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return { nodes, edges };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function renderGraph(tree, container) {
|
|
||||||
const { nodes, edges } = walk(tree.rootNode);
|
|
||||||
const graphviz = await graphvizLoaded;
|
|
||||||
let dot = toDot({
|
|
||||||
graph: {
|
|
||||||
nodes,
|
|
||||||
edges,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
dot = dot.split('\n');
|
|
||||||
dot.splice(1, 0, 'bgcolor="transparent"');
|
|
||||||
dot.splice(1, 0, 'color="white"');
|
|
||||||
dot = dot.join('\n');
|
|
||||||
const svg = await graphviz.layout(dot, 'svg', 'dot', {});
|
|
||||||
container.innerHTML = svg;
|
|
||||||
}
|
|
||||||
@ -23,7 +23,6 @@
|
|||||||
<body style="margin: 0; padding: 0">
|
<body style="margin: 0; padding: 0">
|
||||||
<textarea id="code" style="width: 100%; height: 200px"></textarea>
|
<textarea id="code" style="width: 100%; height: 200px"></textarea>
|
||||||
<pre id="result"></pre>
|
<pre id="result"></pre>
|
||||||
<div id="graph" style="display: flex; width: 100%; margin: auto; justify-content: center"></div>
|
|
||||||
<script type="module" src="/main.js"></script>
|
<script type="module" src="/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,12 +1,9 @@
|
|||||||
import { run, parse } from 'hs2js';
|
import { run, parse } from 'hs2js';
|
||||||
import { renderGraph } from './graph.mjs';
|
|
||||||
import { initStrudel, reify, late, samples, stack } from '@strudel/web';
|
import { initStrudel, reify, late, samples, stack } from '@strudel/web';
|
||||||
initStrudel({
|
initStrudel({
|
||||||
prebake: () => samples('github:tidalcycles/dirt-samples'),
|
prebake: () => samples('github:tidalcycles/dirt-samples'),
|
||||||
});
|
});
|
||||||
|
|
||||||
const graphContainer = document.getElementById('graph');
|
|
||||||
|
|
||||||
const textarea = document.getElementById('code');
|
const textarea = document.getElementById('code');
|
||||||
if (window.location.hash) {
|
if (window.location.hash) {
|
||||||
textarea.value = atob(window.location.hash.slice(1));
|
textarea.value = atob(window.location.hash.slice(1));
|
||||||
@ -60,12 +57,6 @@ async function update() {
|
|||||||
}
|
}
|
||||||
console.log('parsed tree');
|
console.log('parsed tree');
|
||||||
console.log(tree.rootNode.toString());
|
console.log(tree.rootNode.toString());
|
||||||
try {
|
|
||||||
renderGraph(tree, graphContainer);
|
|
||||||
} catch (err) {
|
|
||||||
console.warn('could not render graph');
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
let patterns = {};
|
let patterns = {};
|
||||||
window.p = (name, pattern) => {
|
window.p = (name, pattern) => {
|
||||||
|
|||||||
@ -27,8 +27,6 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hpcc-js/wasm": "^2.15.3",
|
|
||||||
"jgf-dot": "^1.1.1",
|
|
||||||
"@strudel/web": "workspace:*",
|
"@strudel/web": "workspace:*",
|
||||||
"hs2js": "workspace:*"
|
"hs2js": "workspace:*"
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user