elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-11 13:48:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove graphviz

Browse Source
This commit is contained in:
Felix Roos 2024-05-17 18:41:02 +02:00
parent a9fa6f14fb
commit 5f8da04cd8
5 changed files with 96 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
examples/buildless/tidal.html Normal file
View 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>

43
packages/tidal/graph.mjs
View File

@ -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;
}

1
packages/tidal/index.html
View File

@ -23,7 +23,6 @@
<body style="margin: 0; padding: 0">
<textarea id="code" style="width: 100%; height: 200px"></textarea>
<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>
</body>
</html>

9
packages/tidal/main.js
View File

@ -1,12 +1,9 @@
import { run, parse } from 'hs2js';
import { renderGraph } from './graph.mjs';
import { initStrudel, reify, late, samples, stack } from '@strudel/web';
initStrudel({
prebake: () => samples('github:tidalcycles/dirt-samples'),
});
const graphContainer = document.getElementById('graph');
const textarea = document.getElementById('code');
if (window.location.hash) {
textarea.value = atob(window.location.hash.slice(1));
@ -60,12 +57,6 @@ async function update() {
}
console.log('parsed tree');
console.log(tree.rootNode.toString());
try {
renderGraph(tree, graphContainer);
} catch (err) {
console.warn('could not render graph');
console.error(err);
}
try {
let patterns = {};
window.p = (name, pattern) => {

2
packages/tidal/package.json
View File

@ -27,8 +27,6 @@
},
"homepage": "https://github.com/tidalcycles/strudel#readme",
"dependencies": {
"@hpcc-js/wasm": "^2.15.3",
"jgf-dot": "^1.1.1",
"@strudel/web": "workspace:*",
"hs2js": "workspace:*"
},