lexgui 0.5.2 → 0.5.3

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 +2 -2
  3. package/build/lexgui.css +387 -519
  4. package/build/lexgui.js +141 -102
  5. package/build/lexgui.min.css +4 -3
  6. package/build/lexgui.min.js +1 -1
  7. package/build/lexgui.module.js +141 -102
  8. package/build/lexgui.module.min.js +1 -1
  9. package/build/utilities.css +215 -0
  10. package/changelog.md +15 -1
  11. package/demo.js +94 -39
  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/all_widgets.html ADDED
@@ -0,0 +1,368 @@
1
+ <!DOCTYPE html
2
+ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
+
5
+ <head>
6
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
7
+ <title>LexGUI demo</title>
8
+ <link rel="stylesheet" href="../build/lexgui.css">
9
+ <link rel="icon" href="../images/icon.png">
10
+
11
+ <script type="importmap">
12
+ {
13
+ "imports": {
14
+ "lexgui": "../build/lexgui.module.js",
15
+ "lexgui/components/": "../build/components/"
16
+ }
17
+ }
18
+ </script>
19
+
20
+ </head>
21
+
22
+ <body>
23
+
24
+ </body>
25
+
26
+ <script type="module">
27
+ import { LX } from 'lexgui';
28
+ import 'lexgui/components/codeeditor.js';
29
+
30
+ window.LX = LX;
31
+
32
+ // Init library and get main area
33
+ let area = LX.init();
34
+
35
+ area.addMenubar(m => {
36
+ m.addButtons([
37
+ {
38
+ title: "Toggle Sections",
39
+ icon: "fa-solid fa-eye",
40
+ callback: (event, swapValue) => { closedDefault = !closedDefault; fillPanels(); }
41
+ },
42
+ {
43
+ title: "Change Theme",
44
+ icon: "fa-solid fa-moon",
45
+ swap: "fa-solid fa-sun",
46
+ callback: (event, swapValue) => { LX.setTheme(swapValue ? "light" : "dark") }
47
+ }
48
+ ]);
49
+
50
+ m.setButtonIcon("Github", "fa-brands fa-github", () => { window.open("https://github.com/jxarco/lexgui.js/") })
51
+ m.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
52
+ }, { sticky: false });
53
+
54
+ var [middle, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
55
+ var [left, center] = middle.split({ sizes: ["50%", null], minimizable: true });
56
+
57
+ // add panels
58
+ var panelA = left.addPanel();
59
+ var panelB = center.addPanel();
60
+ var panelC = right.addPanel();
61
+
62
+ let closedDefault = false;
63
+
64
+ fillPanels();
65
+
66
+ // **** **** **** **** **** **** **** **** **** **** **** ****
67
+
68
+ function fillPanels() {
69
+
70
+ panelA.root.innerHTML = "";
71
+ panelB.root.innerHTML = "";
72
+ panelC.root.innerHTML = "";
73
+
74
+ const comboValues = [
75
+ { value: 'left', selected: true, icon: 'fa fa-align-left' },
76
+ { value: 'center', icon: 'fa fa-align-center' },
77
+ { value: 'right', icon: 'fa fa-align-right' }
78
+ ];
79
+
80
+ const selectValues = ["Godot", "Unity", "Unreal Engine", "Visual Studio", "Visual Studio Code"];
81
+ const selectValuesWithLabels = ["@Engines", "Godot", "Unity", "Unreal Engine", "@Apps", "Visual Studio", "Visual Studio Code"];
82
+
83
+ const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
84
+
85
+ // Test buttons
86
+ {
87
+ const buttonsArea = new LX.Area({ width: "100%", height: "auto" });
88
+ var [buttonsLeft, buttonsRight] = buttonsArea.split({ sizes: ["50%", "50%"] });
89
+ panelA.attach(buttonsArea.root);
90
+
91
+ const buttonsLeftPanel = buttonsLeft.addPanel();
92
+ const buttonsRightPanel = buttonsRight.addPanel();
93
+
94
+ buttonsLeftPanel.branch("Classic Buttons", { closed: closedDefault });
95
+ buttonsLeftPanel.addButton(null, "Classic", null);
96
+ buttonsLeftPanel.addButton(null, "Primary", null, { buttonClass: "primary" });
97
+ buttonsLeftPanel.addButton(null, "Secondary", null, { buttonClass: "secondary" });
98
+ buttonsLeftPanel.addButton(null, "Accent", null, { buttonClass: "accent" });
99
+ buttonsLeftPanel.addButton(null, "Contrast", null, { buttonClass: "contrast" });
100
+ buttonsLeftPanel.addButton(null, "Warning", null, { buttonClass: "warning" });
101
+ buttonsLeftPanel.addButton(null, "Error", null, { buttonClass: "error" });
102
+ buttonsLeftPanel.branch("Disabled Buttons", { closed: closedDefault });
103
+ buttonsLeftPanel.addButton(null, "Classic", null, { disabled: true });
104
+ buttonsLeftPanel.addButton(null, "Primary", null, { disabled: true, buttonClass: "primary" });
105
+ buttonsLeftPanel.addButton(null, "Secondary", null, { disabled: true, buttonClass: "secondary" });
106
+ buttonsLeftPanel.addButton(null, "Accent", null, { disabled: true, buttonClass: "accent" });
107
+ buttonsLeftPanel.addButton(null, "Contrast", null, { disabled: true, buttonClass: "contrast" });
108
+ buttonsLeftPanel.addButton(null, "Warning", null, { disabled: true, buttonClass: "warning" });
109
+ buttonsLeftPanel.addButton(null, "Error", null, { disabled: true, buttonClass: "error" });
110
+ buttonsLeftPanel.branch("Advanced Buttons", { closed: closedDefault });
111
+ buttonsLeftPanel.addButton("Icon Button", "Not used", null, { icon: "fa fa-skull" });
112
+ buttonsLeftPanel.sameLine();
113
+ buttonsLeftPanel.addLabel("Customized Inline Buttons");
114
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-skull", buttonClass: "bg-none" });
115
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-cube", buttonClass: "bg-primary" });
116
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-table-cells", buttonClass: "bg-tertiary fg-tertiary" });
117
+ buttonsLeftPanel.endLine("justify-start");
118
+ buttonsLeftPanel.addButton(null, LX.makeIcon("circle-plus").innerHTML + "Button with Icon Start", null);
119
+ buttonsLeftPanel.addButton(null, "Button with Icon End" + LX.makeIcon("circle-plus").innerHTML, null);
120
+ buttonsLeftPanel.addButton(null, "With a Badge" + LX.badge("+99", "accent sm"));
121
+ buttonsRightPanel.branch("Outline Buttons", { closed: closedDefault });
122
+ buttonsRightPanel.addButton(null, "Classic Outline", null, { buttonClass: "outline" });
123
+ buttonsRightPanel.addButton(null, "Primary Outline", null, { buttonClass: "primary outline" });
124
+ buttonsRightPanel.addButton(null, "Secondary Outline", null, { buttonClass: "secondary outline" });
125
+ buttonsRightPanel.addButton(null, "Accent Outline", null, { buttonClass: "accent outline" });
126
+ buttonsRightPanel.addButton(null, "Contrast Outline", null, { buttonClass: "contrast outline" });
127
+ buttonsRightPanel.addButton(null, "Warning Outline", null, { buttonClass: "warning outline" });
128
+ buttonsRightPanel.addButton(null, "Error Outline", null, { buttonClass: "error outline" });
129
+ buttonsRightPanel.branch("Dashed Buttons", { closed: closedDefault });
130
+ buttonsRightPanel.addButton(null, "Classic Dashed", null, { buttonClass: "dashed" });
131
+ buttonsRightPanel.addButton(null, "Primary Dashed", null, { buttonClass: "primary dashed" });
132
+ buttonsRightPanel.addButton(null, "Secondary Dashed", null, { buttonClass: "secondary dashed" });
133
+ buttonsRightPanel.addButton(null, "Accent Dashed", null, { buttonClass: "accent dashed" });
134
+ buttonsRightPanel.addButton(null, "Contrast Dashed", null, { buttonClass: "contrast dashed" });
135
+ buttonsRightPanel.addButton(null, "Warning Dashed", null, { buttonClass: "warning dashed" });
136
+ buttonsRightPanel.addButton(null, "Error Dashed", null, { buttonClass: "error dashed" });
137
+ buttonsRightPanel.branch("Combo Buttons", { closed: closedDefault });
138
+ buttonsRightPanel.addComboButtons("Classic Combo", comboValues);
139
+ buttonsRightPanel.addComboButtons("Toggle Combo", comboValues, { toggle: true });
140
+ buttonsRightPanel.addComboButtons("No Selection Combo", comboValues, { noSelection: true });
141
+ }
142
+
143
+ const checkArea = new LX.Area({ width: "100%", height: "auto" });
144
+ var [checkLeft, checkRight] = checkArea.split({ sizes: ["50%", "50%"] });
145
+ panelA.attach(checkArea.root);
146
+
147
+ const checkLeftPanel = checkLeft.addPanel();
148
+ const checkRightPanel = checkRight.addPanel();
149
+
150
+ // Test Checkboxes
151
+ {
152
+ checkLeftPanel.branch("Checkboxes", { closed: closedDefault });
153
+ checkLeftPanel.addCheckbox(null, true, null, { className: "x", label: "Classic" });
154
+ checkLeftPanel.addCheckbox(null, true, null, { className: "primary", label: "Primary" });
155
+ checkLeftPanel.addCheckbox(null, true, null, { className: "secondary", label: "Secondary" });
156
+ checkLeftPanel.addCheckbox(null, true, null, { className: "accent", label: "Accent" });
157
+ checkLeftPanel.addCheckbox(null, true, null, { className: "contrast", label: "Contrast" });
158
+ checkLeftPanel.addCheckbox(null, true, null, { className: "warning", label: "Warning" });
159
+ checkLeftPanel.addCheckbox(null, true, null, { className: "error", label: "Error" });
160
+ }
161
+
162
+ // Radiogroup
163
+ {
164
+ checkLeftPanel.branch("Radio Group", { closed: closedDefault });
165
+ checkLeftPanel.addRadioGroup(null, "Notify me about...", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "accent", xdisabled: true, selected: 1 });
166
+ checkLeftPanel.addRadioGroup(null, "Disabled Options...", ["All new messages", "Direct messages and mentions", "Nothing"], null, { disabled: true, selected: 1 });
167
+ }
168
+
169
+ // Test Toggles
170
+ {
171
+ checkRightPanel.branch("Classic Toggles", { closed: closedDefault });
172
+ checkRightPanel.addToggle(null, true, null, { label: "Classic" });
173
+ checkRightPanel.addToggle(null, true, null, { className: "primary", label: "Primary" });
174
+ checkRightPanel.addToggle(null, true, null, { className: "secondary", label: "Secondary" });
175
+ checkRightPanel.addToggle(null, true, null, { className: "accent", label: "Accent" });
176
+ checkRightPanel.addToggle(null, true, null, { className: "contrast", label: "Contrast" });
177
+ checkRightPanel.addToggle(null, true, null, { className: "warning", label: "Warning" });
178
+ checkRightPanel.addToggle(null, true, null, { className: "error", label: "Error" });
179
+ checkRightPanel.branch("Outline Toggles", { closed: closedDefault });
180
+ checkRightPanel.addToggle(null, true, null, { label: "Classic" });
181
+ checkRightPanel.addToggle(null, true, null, { className: "primary outline", label: "Primary" });
182
+ checkRightPanel.addToggle(null, true, null, { className: "secondary outline", label: "Secondary" });
183
+ checkRightPanel.addToggle(null, true, null, { className: "accent outline", label: "Accent" });
184
+ checkRightPanel.addToggle(null, true, null, { className: "contrast outline", label: "Contrast" });
185
+ checkRightPanel.addToggle(null, true, null, { className: "warning outline", label: "Warning" });
186
+ checkRightPanel.addToggle(null, true, null, { className: "error outline", label: "Error" });
187
+ }
188
+
189
+ // Test Inputs
190
+ {
191
+ panelB.branch("Text Inputs", { closed: closedDefault });
192
+ panelB.addText(null, "Classic", null);
193
+ panelB.addText(null, "Outline", null, { inputClass: "outline" });
194
+ panelB.addText(null, "Dashed", null, { inputClass: "dashed" });
195
+ panelB.addText(null, "Disabled TextInput", null, { disabled: true });
196
+ panelB.addLabel("TextInput as Label");
197
+ panelB.branch("TextArea Inputs", { closed: closedDefault });
198
+ panelB.addTextArea("TextArea", loremText, null, { placeholder: 'Some notes...' });
199
+ panelB.addTextArea("Fit Height TextArea", loremText, null, { placeholder: 'Some notes...', fitHeight: true });
200
+ // panelB.addText(null, "Warning TextInput", null, { warning: true });
201
+ panelB.branch("Number Inputs", { closed: closedDefault });
202
+ panelB.addNumber("Classic", 0, null);
203
+ panelB.addNumber("Disabled", 0, null, { disabled: true });
204
+ panelB.addNumber("With Units", 12, null, { units: "px" });
205
+ panelB.addNumber("With Slider", 0, null, { min: 1, max: 48, step: 1 });
206
+ panelB.branch("Vector Inputs", { closed: closedDefault });
207
+ panelB.addVector2("Classic Vec2", [0, 0], null);
208
+ panelB.addVector3("Disabled Vec3", [0, 0, 0], null, { disabled: true });
209
+ panelB.addVector4("Classic Vec4", [0, 0, 0, 0], null);
210
+ panelB.branch("Color Inputs", { closed: closedDefault });
211
+ panelB.addColor("From Hex Color", "#b7a9b1");
212
+ panelB.addColor("From RGB Color", [1, 0.1, 0.6]);
213
+ panelB.addColor("Disabled Color", "#b7a9b1", null, { disabled: true });
214
+ panelB.branch("Range Inputs", { closed: closedDefault });
215
+ panelB.addRange("Classic", 1, null, { min: 0, max: 10, step: 1 });
216
+ panelB.addRange("Primary", 7, null, { min: 0, max: 10, step: 1, className: "primary" });
217
+ panelB.addRange("Secondary", 4, null, { min: 0, max: 10, step: 1, className: "secondary" });
218
+ panelB.addRange("Accent", 3, null, { min: 0, max: 10, step: 1, className: "accent" });
219
+ panelB.addRange("Contrast", 5, null, { min: 0, max: 10, step: 1, className: "contrast" });
220
+ panelB.addRange("Warning", 2, null, { min: 0, max: 10, step: 1, className: "warning" });
221
+ panelB.addRange("Error", 6, null, { min: 0, max: 10, step: 1, className: "error" });
222
+ panelB.addRange("Inverted", 22, null, { min: 20, max: 48, step: 1, left: true });
223
+ panelB.addRange("NoFill", 10, null, { min: 1, max: 48, step: 1, fill: false });
224
+ panelB.addRange("Disabled", 29, null, { min: 1, max: 48, step: 1, disabled: true });
225
+ panelB.branch("Select Inputs", { closed: closedDefault });
226
+ panelB.addSelect("Classic", selectValues, "Unity", null);
227
+ panelB.addSelect("With Labels", selectValuesWithLabels, "Unity", null);
228
+ panelB.addSelect("With Filter", selectValuesWithLabels, "Godot", null, { filter: true, placeholder: "Search tools..." });
229
+ panelB.addSelect("Custom Empty Msg", selectValuesWithLabels, "Unreal Engine", null, { filter: true, emptyMsg: "No tools found.", placeholder: "Search tools..." });
230
+ panelB.addSelect("With Images", [{ value: "Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.png" }, { 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", null);
231
+ panelB.addSelect("With Gifs", [{ value: "Godot", src: "https://i.redd.it/4vepr95bye861.gif" }, { value: "Unity", src: "https://i.gifer.com/origin/db/db3cb258e9bbb78c5851a000742e5468_w200.gif" }, { value: "Unreal Engine", src: "https://d3kjluh73b9h9o.cloudfront.net/original/4X/e/0/d/e0deb23c10cc7852c6ab91c28083e27f9c8228f8.gif" }], "Godot", null);
232
+ panelB.branch("File Inputs", { closed: closedDefault });
233
+ panelB.addFile("Classic");
234
+ panelB.addFile("Disabled", null, { disabled: true });
235
+ }
236
+
237
+ // Tree
238
+ {
239
+ panelC.branch("Data Tree", { closed: closedDefault });
240
+ let sceneData = {
241
+ 'id': 'root',
242
+ 'children': [
243
+ {
244
+ 'id': 'node_1',
245
+ 'children': [
246
+ {
247
+ 'id': 'node_1_1',
248
+ 'icon': 'fa-solid fa-cube',
249
+ 'children': [],
250
+ 'actions': [
251
+ {
252
+ 'name': 'Open script',
253
+ 'icon': 'fa-solid fa-scroll',
254
+ 'callback': function (node) {
255
+ console.log(node.id + ": Script opened!")
256
+ }
257
+ }
258
+ ]
259
+ }
260
+ ]
261
+ },
262
+ {
263
+ 'id': 'node_2',
264
+ 'icon': 'fa-solid fa-circle-play',
265
+ 'children': []
266
+ },
267
+ {
268
+ 'id': 'node_3',
269
+ 'children': [
270
+ {
271
+ 'id': 'node_3_1',
272
+ 'icon': 'fa-solid fa-cube',
273
+ 'children': []
274
+ },
275
+ {
276
+ 'id': 'node_3_2',
277
+ 'icon': 'fa-solid fa-cube',
278
+ 'children': []
279
+ }
280
+ ]
281
+ }
282
+ ]
283
+ };
284
+
285
+ // This is optional!
286
+ const treeIcons = [
287
+ {
288
+ 'name': 'Add node',
289
+ 'icon': 'fa-solid fa-plus',
290
+ 'callback': () => { console.log("Node added!") }
291
+ },
292
+ {
293
+ 'name': 'Instantiate scene',
294
+ 'icon': 'fa-solid fa-link',
295
+ 'callback': () => { console.log("Scene instantiated!") }
296
+ }
297
+ ];
298
+
299
+ panelC.addTree(null, sceneData, {
300
+ icons: treeIcons,
301
+ addDefault: true,
302
+ onevent: (event) => {
303
+ switch (event.type) {
304
+ case LX.TreeEvent.NODE_CONTEXTMENU:
305
+ const m = event.panel;
306
+ m.add("Components/Transform");
307
+ m.add("Components/MeshRenderer");
308
+ break;
309
+ }
310
+ }
311
+ });
312
+ }
313
+
314
+ // Table
315
+ {
316
+ panelC.branch("Tables", { closed: closedDefault });
317
+ panelC.addTable(null, {
318
+ head: ["Name", "Status", "Priority"],
319
+ body: [
320
+ ["Alice", "In Progress", "High"],
321
+ ["Bob", "Backlog", "Medium"],
322
+ ["Prince", "Canceled", "Low"],
323
+ ["Sean", "Done", "High"],
324
+ ["Carter", "In Progress", "Medium"],
325
+ ["James", "Backlog", "Low"],
326
+ ["Mickey", "Todo", "Low"],
327
+ ["Charlie", "Canceled", "Low"],
328
+ ["Potato", "Todo", "High"]
329
+ ]
330
+ }, {
331
+ selectable: true,
332
+ sortable: true,
333
+ toggleColumns: true,
334
+ filter: "Name",
335
+ customFilters: [
336
+ { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Cancelled"] },
337
+ { name: "Priority", options: ["Low", "Medium", "High"] },
338
+ ],
339
+ rowActions: [
340
+ { icon: "edit", title: "Edit Row" },
341
+ "delete",
342
+ "menu"
343
+ ],
344
+ onMenuAction: (index, tableData) => {
345
+ return [
346
+ { name: "Export" },
347
+ { name: "Make a copy" },
348
+ { name: "Favourite" }
349
+ ]
350
+ }
351
+ });
352
+ }
353
+
354
+ // Tags
355
+ {
356
+ panelC.branch("Tags", { closed: closedDefault });
357
+ panelC.addTags("Game Tags", "2d, karate, ai, engine, ps5, console");
358
+ }
359
+
360
+ // Layers
361
+ {
362
+ panelC.branch("Layers", { closed: closedDefault });
363
+ panelC.addLayers("Layers", 10);
364
+ }
365
+ }
366
+ </script>
367
+
368
+ </html>
package/examples/area_tabs.html CHANGED
@@ -1,5 +1,7 @@
1
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
+ <!DOCTYPE html
2
+ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
+
3
5
  <head>
4
6
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
7
  <title>LexGUI Area Tabs Demo</title>
@@ -14,113 +16,119 @@
14
16
  }
15
17
  </script>
16
18
  </head>
19
+
17
20
  <body></body>
18
- <script type="module">
21
+ <script type="module">
19
22
 
20
- import { LX } from 'lexgui';
23
+ import { LX } from 'lexgui';
21
24
 
22
- // init library and get main area
23
- let area = LX.init();
25
+ // init library and get main area
26
+ let area = LX.init();
24
27
 
25
- // split main area
26
- var [leftArea, rightArea] = area.split({sizes:["75%","25%"]});
28
+ // split main area
29
+ var [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"] });
27
30
 
28
- // Get new content area to fill it
29
- const leftTabs = leftArea.addTabs();
31
+ // Get new content area to fill it
32
+ const leftTabs = leftArea.addTabs();
30
33
 
31
- // add canvas to left upper part
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
- leftTabs.add( "Canvas", canvas );
34
+ // add canvas to left upper part
35
+ var canvas = document.createElement('canvas');
36
+ canvas.id = "mycanvas";
37
+ canvas.width = leftArea.root.clientWidth;
38
+ canvas.height = leftArea.root.clientHeight;
39
+ canvas.style.width = "100%";
40
+ canvas.style.height = "100%";
41
+ leftTabs.add("Canvas", canvas);
39
42
 
40
- // add on resize event to control canvas size
41
- leftArea.onresize = function( bounding ) {
42
- canvas.width = bounding.width;
43
- canvas.height = bounding.height;
44
- };
43
+ // add on resize event to control canvas size
44
+ leftArea.onresize = function (bounding) {
45
+ canvas.width = bounding.width;
46
+ canvas.height = bounding.height;
47
+ };
45
48
 
46
- const rightTabs = rightArea.addTabs();
49
+ const rightTabs = rightArea.addTabs();
47
50
 
48
- var panelA = new LX.Panel();
49
- fillPanelA( panelA );
50
- rightTabs.add( "PanelA", panelA );
51
+ var panelA = new LX.Panel();
52
+ fillPanelA(panelA);
53
+ rightTabs.add("PanelA", panelA);
51
54
 
52
- var panelB = new LX.Panel();
53
- fillPanelB( panelB );
54
- rightTabs.add( "PanelB", panelB );
55
+ var panelB = new LX.Panel();
56
+ fillPanelB(panelB);
57
+ rightTabs.add("PanelB", panelB);
55
58
 
56
- var panelC = new LX.Panel();
57
- fillPanelC( panelC );
58
- rightTabs.add( "panelC", panelC );
59
+ var panelC = new LX.Panel();
60
+ fillPanelC(panelC);
61
+ rightTabs.add("panelC", panelC);
59
62
 
60
- function loop(dt) {
61
-
62
- var ctx = canvas.getContext("2d");
63
+ function loop(dt) {
63
64
 
64
- // Get values from panel widgets (e.g. color value)
65
- ctx.fillStyle = panelA.getValue('Background');
65
+ var ctx = canvas.getContext("2d");
66
66
 
67
- ctx.fillRect(0, 0, canvas.width, canvas.height);
68
- ctx.font = panelA.getValue('Font Size') + "px Monospace";
67
+ // Get values from panel widgets (e.g. color value)
68
+ ctx.fillStyle = panelA.getValue('Background');
69
69
 
70
- ctx.fillStyle = panelA.getValue('Font Color');
70
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
71
+ ctx.font = panelA.getValue('Font Size') + "px Monospace";
71
72
 
72
- const text = panelA.getValue('Text');
73
- const pos2D = panelA.getValue('2D Position');
74
- ctx.fillText(text, pos2D[0], pos2D[1]);
73
+ ctx.fillStyle = panelA.getValue('Font Color');
75
74
 
76
- requestAnimationFrame(loop);
77
- }
75
+ const text = panelA.getValue('Text');
76
+ const pos2D = panelA.getValue('2D Position');
77
+ ctx.fillText(text, pos2D[0], pos2D[1]);
78
78
 
79
79
  requestAnimationFrame(loop);
80
-
81
- // **** **** **** **** **** **** **** **** **** **** **** ****
82
-
83
- function fillPanelA( panel ) {
84
- panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
85
- panel.addColor("Background", "#b7a9b1");
86
- panel.addText("Text", "Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
87
- panel.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
88
- console.log("Font Color: ", value);
89
- });
90
- panel.addNumber("Font Size", 36, (value, event) => {
91
- console.log(value);
92
- }, { min: 1, max: 48, step: 1});
93
- panel.addVector2("2D Position", [250, 350], (value, event) => {
94
- console.log(value);
95
- }, { min: 0, max: 1024 });
96
- panel.merge();
97
- }
98
-
99
- function fillPanelB( panel ) {
100
- panel.branch("Settings", {icon: "fa-solid fa-palette", filter: true});
101
- panel.addTitle("Configuration (Im a title)");
102
- panel.addCheckbox("Toggle me", true, (value, event) => {
103
- console.log(value);
104
- }, { suboptions: (p) => {
80
+ }
81
+
82
+ requestAnimationFrame(loop);
83
+
84
+ // **** **** **** **** **** **** **** **** **** **** **** ****
85
+
86
+ function fillPanelA(panel) {
87
+ panel.branch("Canvas", { icon: "fa-solid fa-palette", filter: true });
88
+ panel.addColor("Background", "#b7a9b1");
89
+ panel.addText("Text", "Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
90
+ panel.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
91
+ console.log("Font Color: ", value);
92
+ });
93
+ panel.addNumber("Font Size", 36, (value, event) => {
94
+ console.log(value);
95
+ }, { min: 1, max: 48, step: 1 });
96
+ panel.addVector2("2D Position", [250, 350], (value, event) => {
97
+ console.log(value);
98
+ }, { min: 0, max: 1024 });
99
+ panel.merge();
100
+ }
101
+
102
+ function fillPanelB(panel) {
103
+ panel.branch("Settings", { icon: "fa-solid fa-palette", filter: true });
104
+ panel.addTitle("Configuration (Im a title)");
105
+ panel.addCheckbox("Toggle me", true, (value, event) => {
106
+ console.log(value);
107
+ }, {
108
+ suboptions: (p) => {
105
109
  p.addText(null, "Suboption 1");
106
110
  p.addNumber("Suboption 2", 12);
107
- } });
108
- panel.addFile("Image", data => { console.log(data) }, {} );
109
- panel.merge();
110
- }
111
-
112
- function fillPanelC( panel ) {
113
- panel.branch("Some Branch", {icon: "fa-solid fa-palette", filter: true});
114
- panel.addTitle("C title");
115
- panel.addToggle("A cool Toggle", true, (value, event) => {
116
- console.log(value);
117
- }, { suboptions: (p) => {
111
+ }
112
+ });
113
+ panel.addFile("Image", data => { console.log(data) }, {});
114
+ panel.merge();
115
+ }
116
+
117
+ function fillPanelC(panel) {
118
+ panel.branch("Some Branch", { icon: "fa-solid fa-palette", filter: true });
119
+ panel.addTitle("C title");
120
+ panel.addToggle("A cool Toggle", true, (value, event) => {
121
+ console.log(value);
122
+ }, {
123
+ suboptions: (p) => {
118
124
  p.addText(null, "Suboption 1");
119
125
  p.addNumber("Suboption 2", 12);
120
- } });
121
- panel.addRange("Yup", 15, data => { console.log(data) }, {} );
122
- panel.merge();
123
- }
126
+ }
127
+ });
128
+ panel.addRange("Yup", 15, data => { console.log(data) }, {});
129
+ panel.merge();
130
+ }
131
+
132
+ </script>
124
133
 
125
- </script>
126
134
  </html>