lexgui 0.5.2 → 0.5.4

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.
Files changed (25) hide show
  1. package/build/components/audio.js +7 -7
  2. package/build/components/timeline.js +3 -3
  3. package/build/lexgui.css +484 -552
  4. package/build/lexgui.js +396 -182
  5. package/build/lexgui.min.css +4 -3
  6. package/build/lexgui.min.js +1 -1
  7. package/build/lexgui.module.js +396 -182
  8. package/build/lexgui.module.min.js +1 -1
  9. package/build/utilities.css +314 -0
  10. package/changelog.md +30 -1
  11. package/demo.js +434 -49
  12. package/examples/all_widgets.html +368 -0
  13. package/examples/area_tabs.html +94 -86
  14. package/examples/asset_view.html +183 -180
  15. package/examples/code_editor.html +62 -61
  16. package/examples/dialogs.html +97 -94
  17. package/examples/immediate_ui.html +44 -42
  18. package/examples/index.html +4 -7
  19. package/examples/node_graph.html +39 -36
  20. package/examples/previews/all_widgets.png +0 -0
  21. package/examples/side_bar.html +93 -90
  22. package/examples/timeline.html +4 -4
  23. package/examples/video_editor.html +38 -35
  24. package/examples/video_editor2.html +84 -79
  25. package/package.json +1 -1
package/examples/asset_view.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
2
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+
3
4
  <head>
4
5
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
6
  <title>LexGUI AssetView Demo</title>
@@ -14,189 +15,191 @@
14
15
  }
15
16
  </script>
16
17
  </head>
18
+
17
19
  <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
- // Split main area
27
- var [topArea, bottomArea] = area.split({type: 'vertical', sizes:["60vh","40vh"]});
28
- bottomArea.setLimitBox(0, 450);
29
-
30
- // Add canvas to topArea
31
- var canvas = document.createElement('canvas');
32
- canvas.id = "mycanvas";
33
- canvas.width = topArea.root.clientWidth;
34
- canvas.height = topArea.root.clientHeight;
35
- canvas.style.width = "100%";
36
- canvas.style.height = "100%";
37
- topArea.attach( canvas );
38
-
39
- // Add on resize event to control canvas size
40
- topArea.onresize = function( bounding ) {
41
- canvas.width = bounding.width;
42
- canvas.height = bounding.height;
43
- };
44
-
45
- let assetView = new LX.AssetView({
46
- // useNativeTitle: true,
47
- // skipBrowser: true,
48
- // skipPreview: true,
49
- // rootPath: "../"
50
- });
51
- bottomArea.attach( assetView );
52
-
53
- let assetData = [
54
- {
55
- id: "dog.png",
56
- type: "image",
57
- path: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
58
- },
59
- {
60
- id: "sigml_test.sigml",
61
- type: "sigml",
62
- src: "../data/sigml_test.sigml",
63
- lastModified: 1740588312813
64
- },
65
- {
66
- id: "test.json",
67
- type: "JSON",
68
- src: "../data/test.json",
69
- lastModified: 1740581312813
70
- },
71
- {
72
- id: "godot",
73
- type: "folder",
74
- children: [
75
- {
76
- id: "color.png",
77
- type: "image",
78
- src: "https://godotengine.org/assets/press/icon_color.png"
79
- },
80
- {
81
- id: "monochrome_light.png",
82
- type: "image",
83
- src: "https://godotengine.org/assets/press/icon_monochrome_light.png"
84
- },
85
- {
86
- id: "example.png",
87
- type: "image",
88
- src: "../data/godot_pixelart.png"
89
- },
90
- {
91
- id: "vertical_color.png",
92
- type: "image",
93
- src: "https://godotengine.org/assets/press/logo_vertical_color_dark.png"
94
- },
95
- {
96
- id: "doggies",
97
- type: "folder",
98
- children: [
99
- {
100
- id: "pepe.png",
101
- type: "image",
102
- src: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
103
- }
104
- ]
105
- }
106
- ]
107
- },
108
- {
109
- id: "blacky.png",
110
- type: "image",
111
- src: "https://www.pngall.com/wp-content/uploads/5/Black-Dog-PNG.png"
112
- },
113
- {
114
- id: "german.png",
115
- type: "image",
116
- src: "https://static.vecteezy.com/system/resources/previews/017/420/504/original/portrait-of-a-dog-png.png"
117
- },
118
- {
119
- id: "unreal",
120
- type: "folder",
121
- children: [
122
- {
123
- id: "color.png",
124
- type: "image",
125
- src: "https://cdn2.unrealengine.com/ue-logotype-2023-vertical-white-1686x2048-bbfded26daa7.png"
126
- },
127
- {
128
- id: "demo.js",
129
- type: "script",
130
- src: "../data/script.js"
131
- },
132
- {
133
- id: "empty_folder",
134
- type: "folder",
135
- children: []
136
- }
137
- ]
138
- },
139
- {
140
- id: "brow_lowerer.png",
141
- type: "clip",
142
- src: "../data/brow_lowerer.png",
143
- lastModified: 1740181312813
144
- }
145
- ];
146
-
147
- assetView.load( assetData, event => {
148
- switch(event.type) {
149
- case LX.AssetViewEvent.ASSET_SELECTED:
150
- if(event.multiple)
151
- console.log("Selected: ", event.item);
152
- else
153
- console.log(event.item.id + " selected");
154
- break;
155
- case LX.AssetViewEvent.ASSET_DBLCLICKED:
156
- console.log(event.item.id + " double clicked");
157
- if( !event.item.src || event.item.type == "image" ) break;
158
- if(window.dialog) window.dialog.destroy();
159
- window.dialog = new LX.PocketDialog("Editor", p => {
160
- const area = new LX.Area();
161
- p.attach( area );
162
- let editor = new LX.CodeEditor(area, {
163
- allowAddScripts: false
164
- });
165
- editor.loadFile( event.item.src );
166
- }, { size: ["40%", "600px"], closable: true });
167
- break;
168
- case LX.AssetViewEvent.ENTER_FOLDER:
169
- console.log("Entering folder: " + event.item.id);
170
- break;
171
- case LX.AssetViewEvent.ASSET_DELETED:
172
- console.log(event.item.id + " deleted");
173
- break;
174
- case LX.AssetViewEvent.ASSET_CLONED:
175
- console.log(event.item.id + " cloned");
176
- break;
177
- case LX.AssetViewEvent.ASSET_RENAMED:
178
- console.log(event.item.id + " is now called " + event.value);
179
- break;
180
- }
181
- } );
182
-
183
- function loop(dt) {
184
-
185
- var ctx = canvas.getContext("2d");
186
-
187
- ctx.fillStyle = "#b7a9b1";
188
- ctx.fillRect(0, 0, canvas.width, canvas.height);
189
-
190
- ctx.font = "48px Monospace";
191
- ctx.fillStyle = "#ff1999";
192
-
193
- const text = "Lexgui.js @jxarco";
194
- ctx.fillText(text, 300, 300);
195
-
196
- requestAnimationFrame(loop);
20
+ <script type="module">
21
+
22
+ import { LX } from 'lexgui';
23
+ import 'lexgui/components/codeeditor.js';
24
+
25
+ // Init library and get main area
26
+ let area = LX.init();
27
+
28
+ // Split main area
29
+ var [topArea, bottomArea] = area.split({ type: 'vertical', sizes: ["60vh", "40vh"] });
30
+ bottomArea.setLimitBox(0, 450);
31
+
32
+ // Add canvas to topArea
33
+ var canvas = document.createElement('canvas');
34
+ canvas.id = "mycanvas";
35
+ canvas.width = topArea.root.clientWidth;
36
+ canvas.height = topArea.root.clientHeight;
37
+ canvas.style.width = "100%";
38
+ canvas.style.height = "100%";
39
+ topArea.attach(canvas);
40
+
41
+ // Add on resize event to control canvas size
42
+ topArea.onresize = function (bounding) {
43
+ canvas.width = bounding.width;
44
+ canvas.height = bounding.height;
45
+ };
46
+
47
+ let assetView = new LX.AssetView({
48
+ // useNativeTitle: true,
49
+ // skipBrowser: true,
50
+ // skipPreview: true,
51
+ // rootPath: "../"
52
+ });
53
+ bottomArea.attach(assetView);
54
+
55
+ let assetData = [
56
+ {
57
+ id: "dog.png",
58
+ type: "image",
59
+ path: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
60
+ },
61
+ {
62
+ id: "sigml_test.sigml",
63
+ type: "sigml",
64
+ src: "../data/sigml_test.sigml",
65
+ lastModified: 1740588312813
66
+ },
67
+ {
68
+ id: "test.json",
69
+ type: "JSON",
70
+ src: "../data/test.json",
71
+ lastModified: 1740581312813
72
+ },
73
+ {
74
+ id: "godot",
75
+ type: "folder",
76
+ children: [
77
+ {
78
+ id: "color.png",
79
+ type: "image",
80
+ src: "https://godotengine.org/assets/press/icon_color.png"
81
+ },
82
+ {
83
+ id: "monochrome_light.png",
84
+ type: "image",
85
+ src: "https://godotengine.org/assets/press/icon_monochrome_light.png"
86
+ },
87
+ {
88
+ id: "example.png",
89
+ type: "image",
90
+ src: "../data/godot_pixelart.png"
91
+ },
92
+ {
93
+ id: "vertical_color.png",
94
+ type: "image",
95
+ src: "https://godotengine.org/assets/press/logo_vertical_color_dark.png"
96
+ },
97
+ {
98
+ id: "doggies",
99
+ type: "folder",
100
+ children: [
101
+ {
102
+ id: "pepe.png",
103
+ type: "image",
104
+ src: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
105
+ }
106
+ ]
107
+ }
108
+ ]
109
+ },
110
+ {
111
+ id: "blacky.png",
112
+ type: "image",
113
+ src: "https://www.pngall.com/wp-content/uploads/5/Black-Dog-PNG.png"
114
+ },
115
+ {
116
+ id: "german.png",
117
+ type: "image",
118
+ src: "https://static.vecteezy.com/system/resources/previews/017/420/504/original/portrait-of-a-dog-png.png"
119
+ },
120
+ {
121
+ id: "unreal",
122
+ type: "folder",
123
+ children: [
124
+ {
125
+ id: "color.png",
126
+ type: "image",
127
+ src: "https://cdn2.unrealengine.com/ue-logotype-2023-vertical-white-1686x2048-bbfded26daa7.png"
128
+ },
129
+ {
130
+ id: "demo.js",
131
+ type: "script",
132
+ src: "../data/script.js"
133
+ },
134
+ {
135
+ id: "empty_folder",
136
+ type: "folder",
137
+ children: []
138
+ }
139
+ ]
140
+ },
141
+ {
142
+ id: "brow_lowerer.png",
143
+ type: "clip",
144
+ src: "../data/brow_lowerer.png",
145
+ lastModified: 1740181312813
197
146
  }
147
+ ];
148
+
149
+ assetView.load(assetData, event => {
150
+ switch (event.type) {
151
+ case LX.AssetViewEvent.ASSET_SELECTED:
152
+ if (event.multiple)
153
+ console.log("Selected: ", event.item);
154
+ else
155
+ console.log(event.item.id + " selected");
156
+ break;
157
+ case LX.AssetViewEvent.ASSET_DBLCLICKED:
158
+ console.log(event.item.id + " double clicked");
159
+ if (!event.item.src || event.item.type == "image") break;
160
+ if (window.dialog) window.dialog.destroy();
161
+ window.dialog = new LX.PocketDialog("Editor", p => {
162
+ const area = new LX.Area();
163
+ p.attach(area);
164
+ let editor = new LX.CodeEditor(area, {
165
+ allowAddScripts: false
166
+ });
167
+ editor.loadFile(event.item.src);
168
+ }, { size: ["40%", "600px"], closable: true });
169
+ break;
170
+ case LX.AssetViewEvent.ENTER_FOLDER:
171
+ console.log("Entering folder: " + event.item.id);
172
+ break;
173
+ case LX.AssetViewEvent.ASSET_DELETED:
174
+ console.log(event.item.id + " deleted");
175
+ break;
176
+ case LX.AssetViewEvent.ASSET_CLONED:
177
+ console.log(event.item.id + " cloned");
178
+ break;
179
+ case LX.AssetViewEvent.ASSET_RENAMED:
180
+ console.log(event.item.id + " is now called " + event.value);
181
+ break;
182
+ }
183
+ });
184
+
185
+ function loop(dt) {
186
+
187
+ var ctx = canvas.getContext("2d");
188
+
189
+ ctx.fillStyle = "#b7a9b1";
190
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
191
+
192
+ ctx.font = "48px Monospace";
193
+ ctx.fillStyle = "#ff1999";
194
+
195
+ const text = "Lexgui.js @jxarco";
196
+ ctx.fillText(text, 300, 300);
198
197
 
199
198
  requestAnimationFrame(loop);
199
+ }
200
+
201
+ requestAnimationFrame(loop);
202
+
203
+ </script>
200
204
 
201
- </script>
202
205
  </html>
package/examples/code_editor.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
2
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+
3
4
  <head>
4
5
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
6
  <title>LexGUI Code Editor Demo</title>
@@ -14,77 +15,77 @@
14
15
  }
15
16
  </script>
16
17
  </head>
17
- <body></body>
18
- <script type="module">
19
18
 
20
- import { LX } from 'lexgui';
21
- import 'lexgui/components/codeeditor.js';
19
+ <body></body>
20
+ <script type="module">
22
21
 
23
- // init library and get main area
24
- let area = LX.init();
22
+ import { LX } from 'lexgui';
23
+ import 'lexgui/components/codeeditor.js';
25
24
 
26
- const fileExplorer = true;
25
+ // init library and get main area
26
+ let area = LX.init();
27
27
 
28
- if( !fileExplorer )
29
- {
30
- var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
31
-
32
- var canvas = document.createElement('canvas');
33
- canvas.id = "mycanvas";
34
- canvas.width = leftArea.root.clientWidth;
35
- canvas.height = leftArea.root.clientHeight;
36
- canvas.style.width = "100%";
37
- canvas.style.height = "100%";
38
- leftArea.attach( canvas );
39
-
40
- leftArea.onresize = function( bounding ) {
41
- canvas.width = bounding.width;
42
- canvas.height = bounding.height;
43
- };
44
-
45
- area = rightArea;
46
- }
28
+ const fileExplorer = true;
47
29
 
48
- let editor = new LX.CodeEditor(area, {
49
- // allowAddScripts: false,
50
- // autocomplete: false,
51
- // disableEdition: true,
52
- fileExplorer: fileExplorer
53
- });
54
-
55
- editor.loadFile( "../data/js_sample.js" );
56
- editor.loadFile( "../data/json_sample.json" );
57
- editor.loadFile( "../data/css_sample.css" );
58
- editor.loadFile( "../data/cpp_sample.cpp" );
59
- editor.loadFile( "../data/cpp_header_sample.hpp" );
60
- editor.loadFile( "../data/c_sample.c" );
61
- editor.loadFile( "../data/xml_sample.xml" );
62
- editor.loadFile( "../data/python_sample.py" );
63
- editor.loadFile( "../data/rust_sample.rs" );
64
- editor.loadFile( "../data/animation.bml", { language: "JSON" } );
65
- editor.loadFile( "../data/CMakeLists.txt", { language: "CMake" } );
66
- editor.loadFile( "../localhost.bat" );
67
- editor.loadFile( "../index.html" );
68
-
69
- if( !fileExplorer )
70
- {
71
- var ctx = canvas.getContext("2d");
72
- ctx.fillStyle = "#b7a9b1";
73
- ctx.font = "48px Monospace";
74
- ctx.strokeStyle = "#ff1999";
30
+ if (!fileExplorer) {
31
+ var [leftArea, rightArea] = area.split({ sizes: ["55%", "45%"] });
32
+
33
+ var canvas = document.createElement('canvas');
34
+ canvas.id = "mycanvas";
35
+ canvas.width = leftArea.root.clientWidth;
36
+ canvas.height = leftArea.root.clientHeight;
37
+ canvas.style.width = "100%";
38
+ canvas.style.height = "100%";
39
+ leftArea.attach(canvas);
40
+
41
+ leftArea.onresize = function (bounding) {
42
+ canvas.width = bounding.width;
43
+ canvas.height = bounding.height;
44
+ };
45
+
46
+ area = rightArea;
47
+ }
75
48
 
76
- function loop(dt) {
77
-
78
- var ctx = canvas.getContext("2d");
49
+ let editor = new LX.CodeEditor(area, {
50
+ // allowAddScripts: false,
51
+ // autocomplete: false,
52
+ // disableEdition: true,
53
+ fileExplorer: fileExplorer
54
+ });
79
55
 
80
- ctx.fillRect(0, 0, canvas.width, canvas.height);
81
- ctx.strokeText("Lexgui.js @jxarco", 200, 300);
56
+ editor.loadFile("../data/js_sample.js");
57
+ editor.loadFile("../data/json_sample.json");
58
+ editor.loadFile("../data/css_sample.css");
59
+ editor.loadFile("../data/cpp_sample.cpp");
60
+ editor.loadFile("../data/cpp_header_sample.hpp");
61
+ editor.loadFile("../data/c_sample.c");
62
+ editor.loadFile("../data/xml_sample.xml");
63
+ editor.loadFile("../data/python_sample.py");
64
+ editor.loadFile("../data/rust_sample.rs");
65
+ editor.loadFile("../data/animation.bml", { language: "JSON" });
66
+ editor.loadFile("../data/CMakeLists.txt", { language: "CMake" });
67
+ editor.loadFile("../localhost.bat");
68
+ editor.loadFile("../index.html");
82
69
 
83
- requestAnimationFrame(loop);
84
- }
70
+ if (!fileExplorer) {
71
+ var ctx = canvas.getContext("2d");
72
+ ctx.fillStyle = "#b7a9b1";
73
+ ctx.font = "48px Monospace";
74
+ ctx.strokeStyle = "#ff1999";
75
+
76
+ function loop(dt) {
77
+
78
+ var ctx = canvas.getContext("2d");
79
+
80
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
81
+ ctx.strokeText("Lexgui.js @jxarco", 200, 300);
85
82
 
86
83
  requestAnimationFrame(loop);
87
84
  }
88
85
 
89
- </script>
86
+ requestAnimationFrame(loop);
87
+ }
88
+
89
+ </script>
90
+
90
91
  </html>