lexgui 0.1.27 → 0.1.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/codeeditor.js +32 -12
- package/build/components/nodegraph.js +2905 -322
- package/build/lexgui.css +590 -172
- package/build/lexgui.js +305 -148
- package/build/lexgui.module.js +297 -140
- package/changelog.md +19 -0
- package/demo.js +1 -1
- package/examples/code_editor.html +1 -1
- package/examples/index.html +2 -1
- package/examples/node_graph.html +4 -4
- package/examples/side_bar.html +80 -0
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# lexgui.js changelog
|
|
2
2
|
|
|
3
|
+
## 0.1.29
|
|
4
|
+
|
|
5
|
+
GraphEditor:
|
|
6
|
+
- Graphs front end (Nodes, links, groups).
|
|
7
|
+
- Editor stuff (Panning, zoom, moving elements, serialize graph, Snapping...)
|
|
8
|
+
- Basic execution functionality.
|
|
9
|
+
|
|
10
|
+
Improved draggable elements.
|
|
11
|
+
Added "onBeforeLoad" callback in File widget.
|
|
12
|
+
Minor bug fixes.
|
|
13
|
+
|
|
14
|
+
## 0.1.28
|
|
15
|
+
|
|
16
|
+
GraphEditor:
|
|
17
|
+
- Big refactor. Almost start from scratch.
|
|
18
|
+
|
|
19
|
+
Support for adding big icons Sidebars.
|
|
20
|
+
General CSS fixes and improvements.
|
|
21
|
+
|
|
3
22
|
## 0.1.27
|
|
4
23
|
|
|
5
24
|
Code Editor:
|
package/demo.js
CHANGED
|
@@ -491,7 +491,7 @@ function fillPanel( panel ) {
|
|
|
491
491
|
console.log(value);
|
|
492
492
|
});
|
|
493
493
|
|
|
494
|
-
panel.addDropdown("Best Logo", [{value:"Godot", src: "https://
|
|
494
|
+
panel.addDropdown("Best Logo", [{value:"Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.webp"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
|
|
495
495
|
console.log(value);
|
|
496
496
|
}, {filter: true});
|
|
497
497
|
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
file_explorer: file_explorer
|
|
56
56
|
});
|
|
57
57
|
|
|
58
|
-
editor.loadFile( "../
|
|
58
|
+
editor.loadFile( "../demo.js" );
|
|
59
59
|
// editor.loadFile( "../data/json_sample.json" );
|
|
60
60
|
// editor.loadFile( "../data/css_sample.css" );
|
|
61
61
|
// editor.loadFile( "../data/cpp_sample.cpp" );
|
package/examples/index.html
CHANGED
package/examples/node_graph.html
CHANGED
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
canvas.height = bounding.height;
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
let
|
|
45
|
-
|
|
46
|
-
});
|
|
44
|
+
let graph_editor = new LX.GraphEditor( bottomArea, {
|
|
45
|
+
|
|
46
|
+
} );
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
graph_editor.loadGraph( "../data/graph_sample.json" );
|
|
49
49
|
|
|
50
50
|
function loop(dt) {
|
|
51
51
|
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
5
|
+
<title>LexGUI Area Tabs Demo</title>
|
|
6
|
+
<link rel="stylesheet" href="../build/lexgui.css">
|
|
7
|
+
<link rel="icon" href="../images/icon.png">
|
|
8
|
+
<script type="importmap">
|
|
9
|
+
{
|
|
10
|
+
"imports": {
|
|
11
|
+
"lexgui": "../build/lexgui.module.js",
|
|
12
|
+
"lexgui/components/": "../build/components/"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
</head>
|
|
17
|
+
<body></body>
|
|
18
|
+
<script type="module">
|
|
19
|
+
|
|
20
|
+
import { LX } from 'lexgui';
|
|
21
|
+
import 'lexgui/components/codeeditor.js';
|
|
22
|
+
|
|
23
|
+
// init library and get main area
|
|
24
|
+
let area = LX.init();
|
|
25
|
+
|
|
26
|
+
area.root.style.width = "100%";
|
|
27
|
+
area.root.style.height = "100%";
|
|
28
|
+
|
|
29
|
+
function hide( el ) {
|
|
30
|
+
el.style.display = 'none';
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function show( el ) {
|
|
34
|
+
el.style.display = 'block';
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
area.addSidebar( m => {
|
|
38
|
+
m.add( "Scene", { icon: "fa fa-cube", callback: () => { codeArea.hide(); show( canvas ); } } );
|
|
39
|
+
m.add( "Code", { icon: "fa fa-code", callback: () => { hide( canvas ); codeArea.show(); } } );
|
|
40
|
+
|
|
41
|
+
m.add( "Search", { icon: "fa fa-search", bottom: true, callback: () => { } } );
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
let codeArea = new LX.Area( { width: "100%", height: "100%" } );
|
|
45
|
+
let editor = new LX.CodeEditor( codeArea );
|
|
46
|
+
editor.loadFile( "../data/js_sample.js" );
|
|
47
|
+
|
|
48
|
+
// add canvas to left upper part
|
|
49
|
+
var canvas = document.createElement('canvas');
|
|
50
|
+
canvas.id = "mycanvas";
|
|
51
|
+
canvas.width = area.root.clientWidth;
|
|
52
|
+
canvas.height = area.root.clientHeight;
|
|
53
|
+
canvas.style.width = "100%";
|
|
54
|
+
canvas.style.height = "100%";
|
|
55
|
+
|
|
56
|
+
area.attach( canvas );
|
|
57
|
+
area.attach( codeArea );
|
|
58
|
+
|
|
59
|
+
function loop(dt) {
|
|
60
|
+
|
|
61
|
+
var ctx = canvas.getContext("2d");
|
|
62
|
+
|
|
63
|
+
ctx.fillStyle = "#def698";
|
|
64
|
+
|
|
65
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
66
|
+
ctx.font = "44px Monospace";
|
|
67
|
+
|
|
68
|
+
ctx.fillStyle = "#f13523";
|
|
69
|
+
|
|
70
|
+
const text = "lexgui @jxarco";
|
|
71
|
+
const pos2D = [200, 200];
|
|
72
|
+
ctx.fillText(text, pos2D[0], pos2D[1]);
|
|
73
|
+
|
|
74
|
+
requestAnimationFrame(loop);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
requestAnimationFrame(loop);
|
|
78
|
+
|
|
79
|
+
</script>
|
|
80
|
+
</html>
|