fps-flow
Version:
An easy and simple flow ui created by First Penny
70 lines (69 loc) • 3.15 kB
HTML
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FP Flow</title><script src="/index.js"></script><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet"><link rel="stylesheet" href="./node_modules/fass-ui/css/style.min.css"><style>body {
overflow: hidden;
margin: 0 ;
font-family: 'Inter', sans-serif;
}
#sappto-flow {
width: 100%;
height: 100vh;
}</style><script defer="defer" src="index.js"></script><link href="styles.css" rel="stylesheet"></head><body><div class="flex"><div style="width: 200px;">Menu</div><div id="sappto-flow" class="flex-grow-1"></div><div style="width: 250px; padding: 1rem;"><div style="margin-bottom: 16px;">Buttons Area</div><button onclick="fpFlow.addNode()" style="padding: .5rem 1rem; cursor: pointer; width: 100%;">Add Node</button> <button onclick="fpFlow.getFlowInfo()" id="save-flow-info" style="padding: .5rem 1rem; cursor: pointer; width: 100%; margin-top: 1rem;">Save Flow</button></div></div><script>const container = document.getElementById('sappto-flow');
const info = {
"nodes": [
{
"id": 0,
"data": {},
"text": "Node 0",
"position": {
"x": 0.3373052245646196,
"y": 0.6550522648083623
}
},
{
"id": 1,
"data": {},
"text": "Node 1",
"position": {
"x": 0.2392300641613199,
"y": 0.17421602787456447
}
},
{
"id": 2,
"data": {},
"text": "Node 2",
"position": {
"x": 0.7296058661778185,
"y": 0.10801393728222997
}
},
{
"id": 3,
"data": {},
"text": "Node Test",
"position": {
"x": 0.5261228230980751,
"y": 0.013937282229965157
}
}
],
"connections": [
{
"from": 1,
"to": 0
},
{
"from": 2,
"to": 0
},
{
"from": 3,
"to": 1
}
]
}
const fpFlow = new FpFlow(container, info);
const saveBtn = document.getElementById('save-flow-info');
saveBtn.addEventListener('click', () => {
console.log(fpFlow.getFlowInfo());
});
// console.log(fpFlow.addNode());</script></body></html>