added notes for editor
This commit is contained in:
parent
4135433e2c
commit
801a9e9195
@ -4,6 +4,14 @@ Update 15/10/2025
|
||||
|
||||
Its been a long time. Life gets in the way as usual. I have been using this toolkit for a number of projects so I wanted to update it. I have built a complete fbp system using it (to be shared later) and I have made a luajit based html rendering engine that is coming along nicely (with the same toolkit).
|
||||
|
||||
https://github.com/dlannan/luajit-html-engine/
|
||||
|
||||
If you want kind of a preview of what is happening you can see some of the work by running:
|
||||
|
||||
```.\bin\win64\luajit.exe .\editor\editor-win64.lua```
|
||||
|
||||
Obviously this is for win64 atm. And there might be browser compatibility issuse too. If you use Firefox or similar it should work fine, but dont expect miracles :)
|
||||
|
||||
What the next few weeks (I hope) will look like:
|
||||
- Improvements for nuklear widgets and state management
|
||||
- Probably remove fbp from here - I think it should be optional (its a dev mindset that can be hindering to some).
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
internal error: editor\twig/aspect\utils.lua:132: attempt to call global 'max' (a nil value) in amiga.html:1
|
||||
internal error: Template 'partials/statistics_js.html' not found in runtime:0
|
||||
Lua stack traceback:
|
||||
editor\twig/aspect\error.lua:103: in function 'new'
|
||||
editor\twig/aspect\compiler.lua:130: in function 'run'
|
||||
editor\twig/aspect\template.lua:232: in function 'compile'
|
||||
editor\twig/aspect\template.lua:311: in function 'get_view'
|
||||
editor\twig/aspect\template.lua:393: in function 'render'
|
||||
editor\twig/aspect\template.lua:395: in function 'render'
|
||||
.\editor\twig\twig.lua:40: in function 'parse'
|
||||
.\editor\routes\xml.lua:15: in function 'process_requests'
|
||||
.\lua\https-server.lua:297: in function <.\lua\https-server.lua:266>
|
||||
142
editor/www/index2.html
Normal file
142
editor/www/index2.html
Normal file
@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Sokol-LuaJIT Editor</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
display: flex;
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#editor { height: 400px; border: 1px solid #ccc; }
|
||||
#rete { height: 400px; border: 1px solid #ccc; background: #f8f8f8; }
|
||||
#jsoneditor { height: 400px; border: 1px solid #ccc; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tabs">
|
||||
<div class="tab active" data-tab="scripts">Scripts</div>
|
||||
<div class="tab" data-tab="flow">Flow</div>
|
||||
<div class="tab" data-tab="data">Data</div>
|
||||
</div>
|
||||
|
||||
<div id="tab-scripts" class="tab-content active">
|
||||
<h2>Lua Script Editor</h2>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
|
||||
<div id="tab-flow" class="tab-content">
|
||||
<h2>State Flow Editor</h2>
|
||||
<div id="rete"></div>
|
||||
</div>
|
||||
|
||||
<div id="tab-data" class="tab-content">
|
||||
<h2>Data Manager</h2>
|
||||
<div id="jsoneditor"></div>
|
||||
</div>
|
||||
|
||||
<!-- JS Dependencies -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/lua/lua.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.css" />
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/rete@1.4.4/build/rete.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/cbor-js@0.1.0/cbor.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Tabs
|
||||
document.querySelectorAll(".tab").forEach(tab => {
|
||||
tab.addEventListener("click", () => {
|
||||
document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
|
||||
document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active"));
|
||||
|
||||
tab.classList.add("active");
|
||||
document.getElementById("tab-" + tab.dataset.tab).classList.add("active");
|
||||
});
|
||||
});
|
||||
|
||||
// CodeMirror - Lua Editor
|
||||
const editor = CodeMirror(document.getElementById("editor"), {
|
||||
mode: "lua",
|
||||
lineNumbers: true,
|
||||
value: "-- Write Lua code here\nfunction update()\n print(\"Hello from Lua!\")\nend",
|
||||
});
|
||||
|
||||
// Rete.js - Simple Flow Diagram
|
||||
async function setupRete() {
|
||||
const container = document.getElementById('rete');
|
||||
const components = [];
|
||||
|
||||
const editor = new Rete.NodeEditor('demo@0.1.0', container);
|
||||
editor.use(ConnectionPlugin);
|
||||
editor.use(VueRenderPlugin); // Only needed if you use Vue-based components
|
||||
|
||||
editor.view.resize();
|
||||
editor.trigger('process');
|
||||
}
|
||||
|
||||
// Note: In this simple version, we're skipping complex node setup
|
||||
document.getElementById("tab-flow").addEventListener("click", () => {
|
||||
// Placeholder flow content
|
||||
document.getElementById("rete").innerHTML = "<p>(Flow Editor Placeholder)</p>";
|
||||
});
|
||||
|
||||
// JSONEditor - CBOR Compatible Editor
|
||||
const container = document.getElementById("jsoneditor");
|
||||
const editorData = new JSONEditor(container, {
|
||||
mode: "tree",
|
||||
modes: ["code", "tree"], // allow switching
|
||||
});
|
||||
|
||||
// Sample JS object (could be CBOR-decoded)
|
||||
const sampleData = {
|
||||
name: "Player",
|
||||
health: 100,
|
||||
inventory: ["sword", "potion"],
|
||||
stats: {
|
||||
strength: 10,
|
||||
agility: 8
|
||||
}
|
||||
};
|
||||
|
||||
editorData.set(sampleData);
|
||||
|
||||
// Encode/decode CBOR (example usage)
|
||||
const encoded = CBOR.encode(sampleData);
|
||||
const decoded = CBOR.decode(encoded);
|
||||
console.log("CBOR roundtrip:", decoded);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user