Spaces:
Running
Running
File size: 3,307 Bytes
1a56106 e0b4f7e 1a56106 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
// Baklava feature requests:
// - Node search (https://github.com/newcat/baklavajs/issues/315)
// - Check out sidebar
// - Collapse node
// - Customize toolbar
// - Nicer styling for node palette, node categories
// - Group nodes, like in Litegraph.
// - Show param name for TextInputInterface.
// - Resizable nodes. (Horizontally.)
// - Put input and output on same line?
<template>
<div style="width: 100vw; height: 100vh">
<BaklavaEditor :view-model="baklava" />
</div>
</template>
<script setup lang="ts">
import { BaklavaEditor, useBaklava } from "@baklavajs/renderer-vue";
import * as BaklavaJS from "baklavajs";
import "@baklavajs/themes/dist/syrup-dark.css";
import { markRaw } from "vue";
import { NodeInterface } from "baklavajs";
import GraphViz from "./components/GraphViz.vue";
const ops = [
{ name: 'Create scale-free graph', type: 'Creation', inputs: [], outputs: ['graph'], params: ['Number of nodes'] },
{ name: 'Compute PageRank', type: 'Algorithms', inputs: ['graph'], outputs: ['graph'], params: ['Damping factor', 'Max iterations'] },
{ name: 'SQL', type: 'Algorithms', inputs: ['graph'], outputs: ['table'], params: ['Query'] },
{ name: 'Visualize graph', type: 'Visualization', inputs: ['graph'], outputs: ['graph-viz'],
params: ['Color by', 'Size by'],
calculate(inputs) {
console.log('Visualize graph', inputs);
return {
'graph-viz': 15,
};
}
},
{ name: 'Num', type: 'Visualization', inputs: [], outputs: ['num'], params: [] },
];
function makeParam(param: string): NodeInterface {
return new BaklavaJS.TextInputInterface(param).setPort(false);
}
function makeOutput(output: string): NodeInterface {
if (output === 'graph-viz') {
return new NodeInterface(output, 0).setComponent(markRaw(GraphViz)).setPort(false);
} else if (output === 'num') {
return new BaklavaJS.NumberInterface(output, 0);
} else {
return new BaklavaJS.NodeInterface(output, 0);
}
}
const baklava = useBaklava();
for (const op of ops) {
baklava.editor.registerNodeType(BaklavaJS.defineNode({
type: op.name,
inputs: {
...op.inputs.reduce((acc, input) => ({ ...acc, [input]: () => new BaklavaJS.NodeInterface(input) }), {}),
...op.params.reduce((acc, param) => ({ ...acc, [param]: () => makeParam(param)}), {}),
},
outputs: op.outputs.reduce((acc, output) => ({ ...acc, [output]: () => makeOutput(output) }), {}),
calculate: op.calculate,
}), { category: op.type });
}
import { DependencyEngine } from "@baklavajs/engine";
// Needed?
const engine = new DependencyEngine(baklava.editor);
engine.start();
import { applyResult } from "@baklavajs/engine";
// Needed?
const token = Symbol();
engine.events.afterRun.subscribe(token, (result) => {
engine.pause();
applyResult(result, baklava.editor);
engine.resume();
});
let lastSave;
baklava.editor.nodeEvents.update.subscribe(token, async (result) => {
const s = JSON.stringify(baklava.editor.save());
if (s !== lastSave) {
lastSave = s;
console.log('save', JSON.parse(s));
const res = await fetch('/api/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: s,
});
const j = await res.json();
console.log('save response', j);
}
});
</script>
|