lexgui 0.6.2 → 0.6.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 (18) hide show
  1. package/build/components/nodegraph.js +4 -4
  2. package/build/components/timeline.js +1580 -2656
  3. package/build/components/videoeditor.js +72 -46
  4. package/build/lexgui.css +6 -5
  5. package/build/lexgui.js +7885 -7388
  6. package/build/lexgui.min.css +1 -1
  7. package/build/lexgui.min.js +1 -1
  8. package/build/lexgui.module.js +7862 -7366
  9. package/build/lexgui.module.min.js +1 -1
  10. package/changelog.md +31 -1
  11. package/demo.js +31 -16
  12. package/examples/all_widgets.html +30 -1
  13. package/examples/dialogs.html +1 -1
  14. package/examples/editor.html +1104 -0
  15. package/examples/index.html +1 -0
  16. package/examples/previews/editor.png +0 -0
  17. package/examples/timeline.html +54 -28
  18. package/package.json +7 -4
package/examples/editor.html ADDED
@@ -0,0 +1,1104 @@
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 Editor 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
+
28
+ import { LX } from 'lexgui';
29
+ import 'lexgui/components/codeeditor.js';
30
+ import 'lexgui/components/timeline.js';
31
+ import 'lexgui/components/audio.js';
32
+
33
+ window.LX = LX;
34
+
35
+ // Init library and get main area
36
+ let area = await LX.init();
37
+
38
+ // Change global properties after init
39
+ // LX.DEFAULT_NAME_WIDTH = "10%";
40
+ // LX.DEFAULT_SPLITBAR_SIZE = 16;
41
+ // LX.OPEN_CONTEXTMENU_ENTRY = 'mouseover';
42
+
43
+ // LX.message("Im in another position", null, { position: [10, 10] });
44
+ // LX.message("Welcome to Lexgui", "Welcome!");
45
+
46
+ // Change some theme colors...
47
+ // LX.setThemeColor('global-color-primary', "#211");
48
+ // LX.setThemeColor('global-selected', "#a74");
49
+ // LX.setThemeColor('global-text', "#f21");
50
+
51
+ LX.toast("Scheduled: Catch up", "Friday, February 10, 2023 at 5:57 PM", {
52
+ action: {
53
+ name: "Undo", callback: (toast, actionName, event) => {
54
+ console.log(toast, actionName);
55
+ toast.close();
56
+ }
57
+ }
58
+ });
59
+
60
+ const code = `
61
+ import { LX } from 'lexgui';
62
+
63
+ class Test {
64
+
65
+ constructor() {
66
+
67
+ this.foo = 1;
68
+
69
+ var div = document.createElement('div');
70
+ div.style.width = "100px"
71
+ div.style.height = "100px"
72
+
73
+ // single line comment
74
+
75
+ document.body.appendChild( div );
76
+
77
+ let a = 1; /* single line block comment */ let b = 2;
78
+
79
+ /*
80
+ multiple line block comment
81
+ */
82
+ }
83
+ }
84
+ `;
85
+
86
+ const snippet = LX.makeCodeSnippet(code, ["780px", "auto"], {
87
+ tabName: "script.js",
88
+ language: "JavaScript",
89
+ linesAdded: [2, [10, 12]],
90
+ linesRemoved: [14, 16],
91
+ xlineNumbers: false,
92
+ windowMode: true
93
+ });
94
+ snippet.style.left = "200px";
95
+ snippet.style.top = "200px";
96
+ snippet.style.position = "absolute";
97
+ // document.body.appendChild( snippet );
98
+
99
+ // menu bar
100
+ const menubar = area.addMenubar([
101
+
102
+ {
103
+ name: "Scene", submenu: [
104
+ { name: "New Scene", callback: () => { console.log("New scene created!") } },
105
+ { name: "Open Scene", icon: "FolderOpen", kbd: "S", callback: () => { console.log("Opening SCENE Dialog") } },
106
+ {
107
+ name: "Open Recent", icon: "File", submenu: [
108
+ { name: "hello.scene", callback: name => { console.log("Opening " + name) } },
109
+ { name: "goodbye.scene", callback: name => { console.log("Opening " + name) } }
110
+ ]
111
+ }
112
+ ]
113
+ },
114
+ {
115
+ name: "Project", submenu: [
116
+ { name: "Project Settings", disabled: true, callback: () => { console.log("Opening Project Settings") } },
117
+ null,
118
+ {
119
+ name: "Export", submenu: [
120
+ { name: "DAE", icon: "Frame", kbd: "D", callback: () => { console.log("Exporting DAE...") } },
121
+ { name: "GLTF", kbd: "G" }
122
+ ]
123
+ },
124
+ { name: "Export", icon: "Download" }
125
+ ]
126
+ },
127
+ {
128
+ name: "Editor", submenu: [
129
+ { name: "Autosave", checked: true, icon: "Save", callback: (key, v, menuItem) => { console.log(key, v) } },
130
+ {
131
+ name: "Settings", icon: "Settings2", callback: () => {
132
+ const dialog = new LX.Dialog("Settings", p => {
133
+ p.addText("A Text", "Testing first widget");
134
+ p.sameLine(3);
135
+ p.addLabel("Buttons:");
136
+ p.addButton(null, "Click me", () => {
137
+ console.log(p.getValue("A Text"));
138
+ });
139
+ p.addButton(null, "Click me v2!", () => {
140
+ console.log(p.getValue("A Text"));
141
+ });
142
+ });
143
+ }
144
+ },
145
+ {
146
+ name: "Write BML", icon: "FileCode", callback: () => {
147
+
148
+ new LX.PocketDialog("BML Instruction", p => {
149
+
150
+ let htmlStr = "Write in the text area below the bml instructions to move the avatar from the web application. A sample of BML instructions can be tested through the helper tabs in the right panel.";
151
+ p.addTextArea(null, htmlStr, null, { disabled: true, fitHeight: true });
152
+
153
+ p.addButton(null, "Click here to see BML instructions and attributes", () => {
154
+ window.open("https://github.com/upf-gti/SignON-realizer/blob/SiGMLExperiments/docs/InstructionsBML.md");
155
+ });
156
+
157
+ htmlStr = "Note: In 'speech', all text between '%' is treated as actual words. An automatic translation from words (dutch) to phonemes (arpabet) is performed.";
158
+ htmlStr += "\n\nNote: Each instruction is inside '{}'. Each instruction is separated by a coma ',' except que last one.";
159
+ p.addTextArea(null, htmlStr, null, { disabled: true, fitHeight: true });
160
+
161
+ htmlStr = 'An example: { "type":"speech", "start": 0, "text": "%hallo%.", "sentT": 1, "sentInt": 0.5 }, { "type": "gesture", "start": 0, "attackPeak": 0.5, "relax": 1, "end": 2, "locationBodyArm": "shoulder", "lrSym": true, "hand": "both", "distance": 0.1 }';
162
+ p.addTextArea(null, htmlStr, null, { disabled: true, fitHeight: true });
163
+
164
+ const area = new LX.Area({ height: "250px" });
165
+ p.attach(area.root);
166
+
167
+ window.editor = new LX.CodeEditor(area, {
168
+ highlight: 'JSON',
169
+ skip_info: true
170
+ });
171
+
172
+ p.addButton(null, "Send", () => {
173
+ console.log(":)")
174
+ });
175
+
176
+ }, { size: ["30%", null], float: "right", draggable: false });
177
+ }
178
+ },
179
+ { name: "Open AssetView", icon: "Monitor", callback: createAssetDialog },
180
+ ]
181
+ },
182
+ {
183
+ name: "Account", submenu: [
184
+ { name: "Login", icon: "User", callback: createLoginForm },
185
+ ]
186
+ },
187
+ {
188
+ name: "Notifications", submenu: [
189
+ { name: "Toast", callback: createToast },
190
+ {
191
+ name: "Prompt", callback: () => {
192
+ LX.prompt("This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
193
+ "Are you absolutely sure?", null, { xposition: ["50px", "100px"] });
194
+ }
195
+ },
196
+ ]
197
+ },
198
+ {
199
+ name: "Help", submenu: [
200
+ { name: "Search Help", icon: "Search", kbd: "F1", callback: () => { window.open("./docs/") } },
201
+ { name: "Support LexGUI", icon: "Heart" },
202
+ ]
203
+ },
204
+
205
+ ], { sticky: false });
206
+
207
+ const starterTheme = LX.getTheme();
208
+
209
+ menubar.addButtons([
210
+ {
211
+ title: "Play",
212
+ icon: "Play@solid",
213
+ swap: "Stop@solid",
214
+ callback: (value, event) => {
215
+ if (value) console.log("play!");
216
+ else console.log("stop!");
217
+ }
218
+ },
219
+ {
220
+ title: "Pause",
221
+ icon: "Pause@solid",
222
+ disabled: true,
223
+ callback: (value, event) => { console.log("pause!"); }
224
+ },
225
+ {
226
+ icon: "RotateLeft",
227
+ callback: (value, event) => {
228
+ const playButton = m.getButton("Play");
229
+ playButton.swap();
230
+ }
231
+ },
232
+ {
233
+ title: "Switch Theme",
234
+ icon: starterTheme == "dark" ? "Moon" : "Sun",
235
+ swap: starterTheme == "dark" ? "Sun" : "Moon",
236
+ callback: (value, event) => { LX.switchTheme() }
237
+ }
238
+ ]);
239
+
240
+ menubar.setButtonIcon("Github", "Github@solid", () => { window.open("https://github.com/jxarco/lexgui.js/") })
241
+ menubar.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
242
+
243
+ // split main area
244
+ var [left, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
245
+
246
+ // split left area
247
+ var [up, bottom] = left.split({ type: 'vertical', sizes: ["50%", null], minimizable: true });
248
+
249
+ var kfTimeline = null;
250
+ var clipsTimeline = null;
251
+ var curvesTimeline = null;
252
+
253
+ bottom.onresize = bounding => {
254
+ if (kfTimeline) kfTimeline.resize([bounding.width, bounding.height]);
255
+ if (clipsTimeline) clipsTimeline.resize([bounding.width, bounding.height]);
256
+ if (curvesTimeline) curvesTimeline.resize([bounding.width, bounding.height]);
257
+ }
258
+
259
+ // another menu bar
260
+ const bottomMenubar = bottom.addMenubar([
261
+ {
262
+ name: "Information", callback: e => {
263
+ console.log(e);
264
+ var el = document.getElementById('kf-timeline');
265
+ if (el)
266
+ el.style.display = 'none';
267
+ el = document.getElementById('clips-timeline');
268
+ if (el)
269
+ el.style.display = 'none';
270
+ el = document.getElementById('curves-timeline');
271
+ if (el)
272
+ el.style.display = 'none';
273
+ var bottomPanel = document.getElementById('bottom-panel');
274
+ bottomPanel.style.display = 'block';
275
+ }
276
+ },
277
+ {
278
+ name: "Keyframes Timeline", callback: e => {
279
+ console.log(e);
280
+ let el = document.getElementById('bottom-panel');
281
+ if (el)
282
+ el.style.display = 'none';
283
+ el = document.getElementById('clips-timeline');
284
+ if (el)
285
+ el.style.display = 'none';
286
+ el = document.getElementById('curves-timeline');
287
+ if (el)
288
+ el.style.display = 'none';
289
+ var timeline = document.getElementById('kf-timeline');
290
+ if (timeline) {
291
+ timeline.style.display = 'block';
292
+ kfTimeline.resize();
293
+ }
294
+ else {
295
+ kfTimeline = new LX.KeyFramesTimeline("kf-timeline", {
296
+ onBeforeCreateTopBar: panel => {
297
+ panel.addSelect("Animation", ["walk", "run", "idle"], "idle", (v) => {
298
+ console.log(v)
299
+ }, { inputWidth: "50%" })
300
+ },
301
+ onAfterCreateTopBar: panel => {
302
+ panel.addButton("customBtn", '', (value, event) => { }, { title: "Custom Action", icon: "WandSparkles", hideName: true });
303
+ panel.addButton("anotherCustomBtn", '', (value, event) => { }, { title: "Other Custom Action", icon: "Box", hideName: true });
304
+ }
305
+ });
306
+
307
+ bottom.attach(kfTimeline.mainArea);
308
+ kfTimeline.setAnimationClip({ tracks: [{ name: "Item 1.position", values: [0, 1, 0, 1], times: [0, 0.1, 0.2, 0.3] }, { name: "Item 1.scale", values: [0, 1, 0, 0.5], times: [0, 0.1, 0.2, 0.3] }, { name: "Item 2", values: [0, 1, 0, 1], times: [0.1, 0.2, 0.3, 0.8] }, { name: "Item 3.position", values: [0, 1, 0], times: [0, 0.1, 0.2, 0.3] }, { name: "Item 3.scale", values: [0, 1, 0], times: [0, 0.1, 0.2, 0.3] }], duration: 1 });
309
+ kfTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
310
+ kfTimeline.resize();
311
+ kfTimeline.draw(0);
312
+ }
313
+ }
314
+ },
315
+ {
316
+ name: "Clips Timeline", callback: e => {
317
+ console.log(e);
318
+ let el = document.getElementById('bottom-panel');
319
+ if (el)
320
+ el.style.display = 'none';
321
+
322
+ el = document.getElementById('kf-timeline');
323
+ if (el)
324
+ el.style.display = 'none';
325
+ el = document.getElementById('curves-timeline');
326
+ if (el)
327
+ el.style.display = 'none';
328
+ var ctimeline = document.getElementById('clips-timeline');
329
+ if (ctimeline) {
330
+ ctimeline.style.display = 'block';
331
+ clipsTimeline.resize();
332
+ }
333
+ else {
334
+ clipsTimeline = new LX.ClipsTimeline("clips-timeline");
335
+ bottom.attach(clipsTimeline.mainArea);
336
+ var clip = { id: "Clip1", start: 0, duration: 1, type: "" };
337
+ clipsTimeline.addClip(clip);
338
+ var clip = { id: "Clip2", start: 0, fadein: 0.5, fadeout: 0.8, duration: 1, type: "" };
339
+ clipsTimeline.addClip(clip);
340
+ var clip = { id: "Clip3", start: 0, fadein: 0.5, fadeout: 0.8, duration: 1, type: "" };
341
+ clipsTimeline.addClip(clip);
342
+ var clip = { id: "Clip4", start: 0, fadein: 0.5, fadeout: 0.8, duration: 1, type: "" };
343
+ clipsTimeline.addClip(clip);
344
+ var clip = { id: "Clip5", start: 0, fadein: 0.5, fadeout: 0.8, duration: 1, type: "" };
345
+ clipsTimeline.addClip(clip);
346
+
347
+ // clipsTimeline.setAnimationClip({tracks: [{clips: [clip]}], duration: 2});
348
+ clipsTimeline.selectedItems = ["Clip1"];
349
+ clipsTimeline.resize();
350
+ clipsTimeline.draw(0);
351
+ }
352
+ }
353
+ },
354
+ {
355
+ name: "Curves Timeline", callback: e => {
356
+ console.log(e);
357
+ let el = document.getElementById('bottom-panel');
358
+ if (el)
359
+ el.style.display = 'none';
360
+ el = document.getElementById('kf-timeline');
361
+ if (el)
362
+ el.style.display = 'none';
363
+ el = document.getElementById('clips-timeline');
364
+ if (el)
365
+ el.style.display = 'none';
366
+
367
+ var timeline = document.getElementById('curves-timeline');
368
+ if (timeline) {
369
+ timeline.style.display = 'block';
370
+ curvesTimeline.resize();
371
+ }
372
+ else {
373
+ curvesTimeline = new LX.CurvesTimeline("curves-timeline");
374
+ curvesTimeline.setAnimationClip({ tracks: [{ name: "Item 1.position", values: [0, 1, 0, -1], times: [0, 0.1, 0.2, 0.3] }, { name: "Item 1.scale", values: [0, 1, 0, 0.5], times: [0, 0.1, 0.2, 0.3] }, { name: "Item 2", values: [0, 1, 0, 1], times: [0.1, 0.2, 0.3, 0.8] }, { name: "Item 3.position", values: [0, 0, 0, 1], times: [0, 0.1, 0.2, 0.3] }, { name: "Item 3.scale", values: [0, 1, 0], times: [0, 0.1, 0.2, 0.3] }], duration: 1 });
375
+ curvesTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
376
+ bottom.attach(curvesTimeline.mainArea);
377
+ curvesTimeline.resize();
378
+ curvesTimeline.draw(0);
379
+ }
380
+ }
381
+ },
382
+
383
+ ]);
384
+
385
+ bottom.onresize = bounding => {
386
+ if (clipsTimeline)
387
+ clipsTimeline.resize();
388
+
389
+ if (kfTimeline)
390
+ kfTimeline.resize();
391
+
392
+ if (curvesTimeline)
393
+ curvesTimeline.resize();
394
+ }
395
+
396
+ var bottomPanel = bottom.addPanel({ id: "bottom-panel" });
397
+ fillBottomPanel(bottomPanel);
398
+
399
+ // split right area
400
+ var [rup, rbottom] = right.split({ type: 'vertical', sizes: ["70%", "30%"] });
401
+
402
+ // Get new content area to fill it
403
+ const topTabs = up.addTabs();
404
+
405
+ // add canvas to left upper part
406
+ var canvas = document.createElement('canvas');
407
+ canvas.style.width = "100%";
408
+ canvas.style.height = "100%";
409
+
410
+ const resizeCanvas = (bounding) => {
411
+ canvas.width = bounding.width;
412
+ canvas.height = bounding.height;
413
+ };
414
+
415
+ topTabs.add("Canvas", canvas, { icon: "Palette", selected: true, onCreate: resizeCanvas });
416
+ topTabs.add("Debug", document.createElement('div'));
417
+
418
+ // add on resize event to control canvas size
419
+ topTabs.area.onresize = resizeCanvas;
420
+
421
+ topTabs.area.addOverlayButtons([
422
+ [
423
+ {
424
+ name: "Select",
425
+ icon: "MousePointer",
426
+ callback: (value, event) => console.log(value),
427
+ selectable: true
428
+ },
429
+ {
430
+ name: "Move",
431
+ icon: "Move",
432
+ callback: (value, event) => console.log(value),
433
+ selectable: true
434
+ },
435
+ {
436
+ name: "Rotate",
437
+ icon: "RotateRight",
438
+ callback: (value, event) => console.log(value),
439
+ selectable: true
440
+ }
441
+ ],
442
+ {
443
+ name: "Lit",
444
+ options: ["Lit", "Unlit", "Wireframe"],
445
+ callback: (value, event) => console.log(value)
446
+ },
447
+ [
448
+ {
449
+ name: "Enable Snap",
450
+ icon: "Frame",
451
+ callback: (value, event) => console.log(value),
452
+ selectable: true
453
+ },
454
+ {
455
+ name: 10,
456
+ options: [10, 100, 1000],
457
+ callback: value => console.log(value)
458
+ }
459
+ ], {
460
+ name: "Open Sidebar Sheet",
461
+ icon: "PanelLeftDashed",
462
+ callback: (value, event) => {
463
+
464
+ // create an area and append a sidebar:
465
+ const area = new LX.Area({ skipAppend: true });
466
+
467
+ const sidebar = area.addSidebar(m => {
468
+ m.group("Projects", { icon: "Plus", callback: (groupName, event) => { console.log(groupName) } });
469
+ m.add("Getting Started", { icon: "Box" /*,collapsable: false*/ });
470
+ m.add("Getting Started/Installation", { icon: "Box", callback: logParams });
471
+ m.add("Getting Started/Project Structure", { icon: "Box", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
472
+ m.add("Building Your Application", { icon: "Code", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
473
+ m.add("Search Blocks", { icon: "Search", callback: logParams });
474
+ m.add("Very loooooooooooooooooooooooong sun", { icon: "Sun", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
475
+ m.separator();
476
+ m.group("API Reference");
477
+ m.add("Components", { icon: "Box", callback: logParams });
478
+ m.add("File Conventions", { icon: "Code", callback: logParams });
479
+ m.add("Functions", { icon: "Search", callback: logParams });
480
+ m.add("CLI", { icon: "Sun", callback: logParams });
481
+ m.separator();
482
+ m.group("Architecture");
483
+ m.add("Accessibility ", { icon: "Box", callback: logParams });
484
+ m.add("Fast Refresh", { icon: "Code", callback: logParams });
485
+ m.add("Supported Browsers", { icon: "Search", callback: logParams });
486
+ m.separator();
487
+ m.add("Calendar ", { icon: "Calendar", collapsable: 3 });
488
+ m.add("Personal ", { callback: logParams, type: "checkbox" });
489
+ m.add("Work", { callback: logParams, type: "checkbox", value: true });
490
+ m.add("Family", { callback: logParams, type: "checkbox" });
491
+ }, { /* collapseToIcons: false, */
492
+ skipHeader: true,
493
+ filter: true,
494
+ footerTitle: "jxarco",
495
+ footerSubtitle: "alexroco.30@gmail.com",
496
+ footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
497
+ });
498
+
499
+ new LX.Sheet("256px", [area]);
500
+ }
501
+ }
502
+ ], { float: "htc" });
503
+
504
+ // add panels
505
+ var sidePanel = rup.addPanel();
506
+ fillPanel(sidePanel);
507
+
508
+ const bottomTabs = rbottom.addTabs({ fit: true });
509
+ var sideBottomPanel = new LX.Panel();
510
+ var sideBottomPanelH = new LX.Panel();
511
+ fillRightBottomPanel(sideBottomPanel, 'Vertical');
512
+ fillRightBottomPanel(sideBottomPanelH, 'Horizontal');
513
+
514
+ bottomTabs.add("Panel V", sideBottomPanel);
515
+ bottomTabs.add("Panel H", sideBottomPanelH);
516
+
517
+ function loop(dt) {
518
+
519
+ var ctx = canvas.getContext("2d");
520
+
521
+ // Get values from panel widgets (e.g. color value)
522
+ ctx.fillStyle = sidePanel.getValue('Background');
523
+
524
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
525
+ ctx.font = sidePanel.getValue('Font Size') + "px Monospace";
526
+
527
+ ctx.fillStyle = sidePanel.getValue('Font Color');
528
+
529
+ const text = sidePanel.getValue('Text');
530
+ const pos2D = sidePanel.getValue('2D Position');
531
+ ctx.fillText(text, pos2D[0], pos2D[1]);
532
+
533
+ if (kfTimeline)
534
+ kfTimeline.draw();
535
+
536
+ if (clipsTimeline)
537
+ clipsTimeline.draw();
538
+
539
+ if (curvesTimeline)
540
+ curvesTimeline.draw();
541
+
542
+ requestAnimationFrame(loop);
543
+ }
544
+
545
+ // createAssetDialog();
546
+
547
+ requestAnimationFrame(loop);
548
+
549
+ // **** **** **** **** **** **** **** **** **** **** **** ****
550
+
551
+ function fillPanel(panel) {
552
+
553
+ // Add data tree
554
+
555
+ let sceneData = {
556
+ 'id': 'root',
557
+ 'children': [
558
+ {
559
+ 'id': 'node_1',
560
+ 'children': [
561
+ {
562
+ 'id': 'node_1_1',
563
+ 'icon': 'Box',
564
+ 'children': [],
565
+ 'actions': [
566
+ {
567
+ 'name': 'Open script',
568
+ 'icon': 'Scroll',
569
+ 'callback': function (node) {
570
+ console.log(node.id + ": Script opened!")
571
+ }
572
+ }
573
+ ]
574
+ }
575
+ ]
576
+ },
577
+ {
578
+ 'id': 'node_2',
579
+ 'icon': 'CirclePlay',
580
+ 'visible': false,
581
+ 'children': []
582
+ },
583
+ {
584
+ 'id': 'node_3',
585
+ 'children': [
586
+ {
587
+ 'id': 'node_3_1',
588
+ 'icon': 'Box',
589
+ 'children': []
590
+ },
591
+ {
592
+ 'id': 'node_3_2',
593
+ 'icon': 'Box',
594
+ 'children': []
595
+ }
596
+ ]
597
+ }
598
+ ]
599
+ };
600
+
601
+ // This is optional!
602
+ const treeIcons = [
603
+ {
604
+ 'name': 'Add node',
605
+ 'icon': 'Plus',
606
+ 'callback': () => { console.log("Node added!") }
607
+ },
608
+ {
609
+ 'name': 'Instantiate scene',
610
+ 'icon': 'Link',
611
+ 'callback': () => { console.log("Scene instantiated!") }
612
+ }
613
+ ];
614
+
615
+ window.tree = panel.addTree("Scene Tree", sceneData, {
616
+ icons: treeIcons,
617
+ // filter: false,
618
+ addDefault: true,
619
+ onevent: (event) => {
620
+ console.log(event.string());
621
+
622
+ switch (event.type) {
623
+ case LX.TreeEvent.NODE_SELECTED:
624
+ if (event.multiple)
625
+ console.log("Selected: ", event.node);
626
+ else
627
+ console.log(event.node.id + " selected");
628
+ break;
629
+ case LX.TreeEvent.NODE_DELETED:
630
+ if (event.multiple)
631
+ console.log("Deleted: ", event.node);
632
+ else
633
+ console.log(event.node.id + " deleted");
634
+ break;
635
+ case LX.TreeEvent.NODE_DBLCLICKED:
636
+ console.log(event.node.id + " dbl clicked");
637
+ break;
638
+ case LX.TreeEvent.NODE_CONTEXTMENU:
639
+ const m = event.panel;
640
+ m.add("Components/Transform");
641
+ m.add("Components/MeshRenderer");
642
+ break;
643
+ case LX.TreeEvent.NODE_DRAGGED:
644
+ console.log(event.node.id + " is now child of " + event.value.id);
645
+ break;
646
+ case LX.TreeEvent.NODE_RENAMED:
647
+ console.log(event.node.id + " is now called " + event.value);
648
+ break;
649
+ case LX.TreeEvent.NODE_VISIBILITY:
650
+ console.log(event.node.id + " visibility: " + event.value);
651
+ break;
652
+ }
653
+ }
654
+ });
655
+
656
+ // add widgets to panel branch
657
+ panel.branch("Canvas", { icon: "Palette", filter: true });
658
+ panel.addColor("Background", "#b7a9b1", (value, event) => {
659
+ console.log(value);
660
+ }, { xuseAlpha: true });
661
+ panel.addText("Text", "Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "Type" });
662
+ panel.addColor("Font Color", { r: 1, g: 0.1, b: 0.6, a: 1 }, (value, event) => {
663
+ console.log("Font Color: ", value);
664
+ }, { xuseAlpha: true, xuseRGB: true });
665
+ panel.addRange("A Default Range", 1, (value, event) => {
666
+ console.log(value);
667
+ }, { min: 0, max: 10, step: 1 });
668
+ panel.addRange("Disabled NoFill Range", 10, (value, event) => {
669
+ console.log(value);
670
+ }, { min: 1, max: 48, step: 1, disabled: true, fill: false });
671
+ panel.addRange("Colored Left Range", 25, (value, event) => {
672
+ console.log(value);
673
+ }, { min: 20, max: 48, step: 1, className: "warning", left: true });
674
+ panel.addNumber("Font Size", 36, (value, event) => {
675
+ console.log(value);
676
+ }, { min: 1, max: 48, step: 1, units: "px" });
677
+ panel.addVector2("2D Position", [250, 350], (value, event) => {
678
+ console.log(value);
679
+ }, { min: 0, max: 1024 });
680
+ panel.addSeparator();
681
+ panel.addRadioGroup(null, "Notify me about...", ["All new messages", "Direct messages and mentions", "Nothing"], (v) => { console.log(v) }, { className: "accent", xdisabled: true, selected: 1 });
682
+ panel.addSeparator();
683
+ panel.addTitle("Configuration (Im a title)", { icon: "Settings3" });
684
+ panel.addCheckbox("Toggle me", true, (value, event) => {
685
+ console.log(value);
686
+ }, {
687
+ suboptions: (p) => {
688
+ p.addText(null, "Suboption 1");
689
+ p.addNumber("Suboption 2", 12);
690
+ }
691
+ });
692
+ panel.merge();
693
+
694
+ panel.branch("Preferences", { icon: "Settings" });
695
+ panel.addButton(null, "Show Notifications" + LX.badge("+99", "accent sm"));
696
+ panel.addCounter("Calories Counter ", 350, (v) => { console.log(v + " calories!") }, { label: "CALORIES/DAY", max: 500 });
697
+ panel.addButton("Colored Tiny Button", "Click here!", () => { }, { buttonClass: "primary xs" });
698
+ panel.addButton("Small Outlined Button", "Click here!", () => { }, { buttonClass: "accent sm outline" });
699
+ panel.addButton("A Classic Button", "Click here!", () => { }, { buttonClass: "md" });
700
+ panel.addCheckbox("I have a label", false, (value, event) => {
701
+ console.log(value);
702
+ }, { label: "Personal", className: "success" });
703
+ panel.sameLine(2);
704
+ panel.addToggle("Colored Toggle", false, (value, event) => {
705
+ console.log(value);
706
+ }, { label: "", className: "accent", width: "50%", nameWidth: "50%" });
707
+ panel.addToggle("Outlined Toggle ", false, (value, event) => {
708
+ console.log(value);
709
+ }, { label: "", className: "secondary outline", width: "50%", nameWidth: "50%" });
710
+ panel.addFile("I'm a File Input", data => { console.log(data) }, {});
711
+ panel.addFile("A Disabled File Input", data => { console.log(data) }, { disabled: true });
712
+ panel.addSelect("Best Tool", ["@Engines", "Godot", "Unity", "Unreal Engine", "@Apps", "Visual Studio", "Visual Studio Code"], "Unity", (value, event) => {
713
+ console.log(value);
714
+ }, { filter: true, emptyMsg: "No engines found.", placeholder: "Search engines..." });
715
+ panel.addSelect("Best Logo", [{ 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", (value, event) => {
716
+ console.log(value);
717
+ });
718
+ panel.addSelect("Best Gif", [{ 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", (value, event) => {
719
+ console.log(value);
720
+ });
721
+
722
+ window.vec = panel.addVector3("Im a Vec3", [0.1, 0.4, 0.5], (value, event) => {
723
+ console.log(value);
724
+ });
725
+ panel.addLayers("Layers", 10, (value, event) => {
726
+ console.log(value);
727
+ });
728
+ panel.addArray("An Item Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
729
+ console.log(value);
730
+ });
731
+ panel.addTags("Game Tags", "2d, karate, ai, engine, ps5, console", (value, event) => {
732
+ console.log(value);
733
+ });
734
+ panel.addComboButtons("Alignment", [
735
+ {
736
+ value: 'left',
737
+ selected: true,
738
+ icon: "AlignLeft",
739
+ callback: (value, event) => {
740
+ console.log(value);
741
+ }
742
+ }, {
743
+ value: 'center',
744
+ icon: "AlignCenter",
745
+ callback: (value, event) => {
746
+ console.log(value);
747
+ }
748
+ }, {
749
+ value: 'right',
750
+ disabled: true,
751
+ icon: "AlignRight",
752
+ callback: (value, event) => {
753
+ console.log(value);
754
+ }
755
+ }
756
+ ], { /* toggle: true, noSelection: true */ });
757
+ panel.addList(null, ['GPTeam', 'Blat Bunny', ['Blat Panthers', 'PawPrint']], 'Blat Panthers', (value, event) => {
758
+ console.log(value);
759
+ });
760
+ const opacityValues = [
761
+ [0.2, 0.3146875],
762
+ [0.417313915857606, 0.8946875000000003],
763
+ [0.5495145631067961, 0.6746875],
764
+ [1, 1]
765
+ ];
766
+ panel.addCurve("Opacity", opacityValues, (value, event) => {
767
+ console.log(value);
768
+ });
769
+ panel.addPad("2D Pad", [0.5, 0.5], (value, event) => {
770
+ console.log(value);
771
+ }, { padSize: "100px", min: -1, max: 2 });
772
+ panel.addSize("Screen Res", [1280, 720], (value, event) => {
773
+ console.log(value);
774
+ }, { units: "p", precision: 0 });
775
+
776
+ panel.branch("Contents", { icon: "Book" });
777
+ panel.addCard("MY PERSONAL CARD", { img: "../data/Screenshot_Code.png" });
778
+ const anElement = document.createElement("div");
779
+ anElement.style.width = anElement.style.height = "24px";
780
+ anElement.style.backgroundColor = "red";
781
+ panel.addContent(null, anElement);
782
+ panel.addImage(null, "../data/Screenshot_Graph.png");
783
+ panel.merge();
784
+
785
+ // This is outside a branch
786
+ panel.addText("Im out :(", "", null, { placeholder: "Alone..." });
787
+ panel.addVector4("Im a Vec4", [0.3, 0.3, 0.5, 1], (value, event) => {
788
+ console.log(value);
789
+ });
790
+ panel.addButton(null, "Click me, Im Full Width...");
791
+ panel.addButton("Test Button", "Reduced width...");
792
+ panel.addSeparator();
793
+ panel.addBlank(12);
794
+ }
795
+
796
+ function fillRightBottomPanel(panel, tab) {
797
+
798
+ panel.clear();
799
+
800
+ panel.branch("Bottom", { icon: "Grid3x3" });
801
+
802
+ if (tab == 'Horizontal') {
803
+ panel.addTabSections("H_tabs", [
804
+ {
805
+ name: "First tab",
806
+ icon: "Discord",
807
+ onCreate: p => {
808
+ p.addTitle("Discord tab");
809
+ p.addButton(null, "Connect");
810
+ },
811
+ onSelect: p => {
812
+ console.log(p);
813
+ }
814
+ },
815
+ {
816
+ name: "Second tab",
817
+ icon: "X-Twitter",
818
+ onCreate: p => {
819
+ p.addTitle("Twitter tab");
820
+ p.addText("Tweet", "", null, { placeholder: "Tyler Rake 2" });
821
+ }
822
+ },
823
+ {
824
+ name: "Third tab",
825
+ icon: "Github",
826
+ onCreate: p => {
827
+ p.addTitle("Github tab");
828
+ p.addButton(null, "Go", () => { window.open("https://github.com/jxarco/lexgui.js/") });
829
+ }
830
+ }
831
+ ], { vertical: false /*, showNames: true */ });
832
+
833
+ panel.addText(null, "Widgets below are out the tabs", null, { disabled: true })
834
+
835
+ // update panel values uising widget name
836
+ panel.addNumber("HeadRoll Value", 0, (value, event) => {
837
+ panel.setValue('HeadRoll', value);
838
+ }, { min: -1, max: 1, step: 0.1 });
839
+ panel.addProgress("HeadRoll", 0, {
840
+ min: -1, max: 1, low: -0.25, high: 0.25, optimum: 0.75, showValue: true, editable: true, callback: (value, event) => {
841
+ panel.setValue('HeadRoll Value', value);
842
+ }
843
+ });
844
+ }
845
+ else if (tab == 'Vertical') {
846
+ panel.addTabSections("V_tabs", [
847
+ {
848
+ name: "First tab",
849
+ icon: "Discord",
850
+ onCreate: (p, content) => {
851
+ p.addTitle("Discord tab");
852
+ p.addButton("Apply", "Add button to branch", (value, event) => {
853
+ p.queue(content);
854
+ p.addButton(null, "Hello");
855
+ p.clearQueue();
856
+ });
857
+ }
858
+ },
859
+ {
860
+ name: "Second tab",
861
+ icon: "X-Twitter",
862
+ onCreate: p => {
863
+ p.addTitle("Twitter tab");
864
+ p.addText("Tweet", "", null, { placeholder: "Tyler Rake 2" });
865
+ }
866
+ },
867
+ {
868
+ name: "Third tab",
869
+ icon: "Github",
870
+ onCreate: p => {
871
+ p.addTitle("Github tab");
872
+ p.addButton(null, "Go", (value, event) => { window.open("https://github.com/jxarco/lexgui.js/") });
873
+ }
874
+ }
875
+ ]);
876
+
877
+ /************** */
878
+ // Custom Widget
879
+
880
+ LX.ADD_CUSTOM_WIDGET("Shader", {
881
+ icon: "Box",
882
+ default: {
883
+ position: [0, 0],
884
+ velocity: [0, 0, 0],
885
+ color: [0, 0, 0, 0],
886
+ hexColor: "#000",
887
+ highRes: false
888
+ }
889
+ });
890
+
891
+ const shaderInstance = {
892
+ 'hexColor': "#f5f505",
893
+ 'highRes': true
894
+ };
895
+
896
+ panel.addShader("A Shader", shaderInstance, (instance) => { console.log(instance) });
897
+ panel.addShader("Empty Instance", null);
898
+
899
+ /************** */
900
+ }
901
+
902
+ panel.merge();
903
+ }
904
+
905
+ function fillBottomPanel(panel) {
906
+
907
+ // add widgets to panel branch
908
+ panel.branch("Information", { icon: "Info" });
909
+ window.tableWidget = panel.addTable("A Table", {
910
+ head: ["Name", "Status", "Priority", "ID"],
911
+ body: [
912
+ ["Alice", "In Progress", "High", 1],
913
+ ["Bob", "Backlog", "Medium", 2],
914
+ ["Prince", "Canceled", "Low", 3],
915
+ ["Sean", "Done", "High", 4],
916
+ ["Carter", "In Progress", "Medium", 5],
917
+ ["James", "Backlog", "Low", 6],
918
+ ["Mickey", "Todo", "Low", 7],
919
+ ["Charlie", "Canceled", "Low", 8],
920
+ ["Potato", "Todo", "High", 9]
921
+ ]
922
+ }, {
923
+ selectable: true,
924
+ sortable: true,
925
+ toggleColumns: true,
926
+ filter: "Name",
927
+ customFilters: [
928
+ { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Cancelled"] },
929
+ { name: "Priority", options: ["Low", "Medium", "High"] },
930
+ { name: "ID", type: "range", min: 0, max: 9, step: 1, units: "hr" },
931
+ ],
932
+ rowActions: [
933
+ { icon: "Edit", title: "Edit Row", callback: (tableData) => { } }, // custom: you can change the data and refresh will be called later!
934
+ "delete",
935
+ "menu"
936
+ ],
937
+ onMenuAction: (index, tableData) => {
938
+ return [
939
+ {
940
+ name: "Export", callback: (a) => {
941
+ tableData.body[index][0] = "Alex";
942
+ tableWidget.refresh();
943
+ }
944
+ },
945
+ { name: "Make a copy", callback: (a) => console.log(a) },
946
+ { name: "Favourite", callback: (a) => console.log(a) },
947
+ null,
948
+ { name: "Delete", icon: "Trash2", className: "fg-error", callback: (a) => console.log(a) },
949
+ ]
950
+ }
951
+ });
952
+ panel.addText("Camera", "Canon EOS 80D", null, { disabled: true });
953
+ panel.addText("Text", "Warning text", null, { warning: true });
954
+ const patternOptions = { uppercase: true }
955
+ panel.addText("Text With Validator Pattern", "", (value, event) => {
956
+ console.log(value);
957
+ }, { pattern: LX.buildTextPattern(patternOptions) });
958
+ panel.addTextArea("Notes", "", (value, event) => {
959
+ console.log(value);
960
+ }, { placeholder: 'Some notes...' });
961
+ panel.addKnob("A Small but disabled Knob", 4, 0, 200, value => { console.log(value) }, { size: 'sm', disabled: true });
962
+ panel.addKnob("A Knob", 4, 0, 200, value => { console.log(value) });
963
+ panel.addKnob("A Big Knob with Snap", 4, 0, 200, value => { console.log(value) }, { size: 'bg', snap: 4 });
964
+ panel.addButton("Apply", "Add button to branch", (value, event) => {
965
+ const branch = panel.getBranch("Information");
966
+ panel.queue(branch.content);
967
+ panel.addButton(null, "Hello");
968
+ panel.clearQueue();
969
+ });
970
+
971
+ panel.branch("A collapsed branch", { closed: true });
972
+ panel.addText(null, "Nothing here", null, { disabled: true });
973
+ panel.merge();
974
+ }
975
+
976
+ function createToast() {
977
+
978
+ const generatedToasts = [
979
+ ["🏆 The Lakers secured a thrilling victory!", "Saturday, March 23 2024, at 7:30 PM"],
980
+ ["⚽ Messi scores a last-minute goal!", "Friday, March 22 2024, at 9:15 PM"],
981
+ ["🎾 Nadal wins another Grand Slam title!", "Thursday, March 21 2024, at 5:00 PM"],
982
+ ["🏀 Warriors dominate in a stunning comeback!", "Wednesday, March 20 2024, at 8:45 PM"],
983
+ ["⚾ Yankees hit a walk-off home run!", "Tuesday, March 19 2024, at 10:10 PM"],
984
+ ["🏈 Chiefs claim another Super Bowl win!", "Monday, March 18 2024, at 6:00 PM"],
985
+ ["🥊 Knockout! The champion retains the title!", "Sunday, March 17 2024, at 11:00 PM"],
986
+ ["🏎️ Verstappen takes the checkered flag in style!", "Saturday, March 16 2024, at 3:30 PM"],
987
+ ["🥇 Olympic record shattered in 100m sprint!", "Friday, March 15 2024, at 4:20 PM"],
988
+ ["🏌️ Hole-in-one! Golf legend makes history!", "Thursday, March 14 2024, at 2:00 PM"]
989
+ ];
990
+ const idx = (Math.random() * (generatedToasts.length - 1)) | 0;
991
+
992
+ LX.toast(generatedToasts[idx][0], generatedToasts[idx][1], {
993
+ action: {
994
+ name: "Got it!", callback: (toast, actionName, event) => {
995
+ console.log(toast, actionName);
996
+ toast.close();
997
+ }
998
+ }
999
+ });
1000
+
1001
+ }
1002
+
1003
+ function createLoginForm() {
1004
+
1005
+ let dialog = new LX.Dialog('Login', panel => {
1006
+
1007
+ const formData = {
1008
+ Username: {
1009
+ value: "",
1010
+ placeholder: "Enter username",
1011
+ icon: "User",
1012
+ pattern: LX.buildTextPattern({ minLength: 3 })
1013
+ },
1014
+ Password: {
1015
+ value: "",
1016
+ type: "password",
1017
+ placeholder: "Enter password",
1018
+ icon: "KeyRound",
1019
+ pattern: LX.buildTextPattern({ lowercase: true, uppercase: true, digit: true, minLength: 6 })
1020
+ }
1021
+ };
1022
+
1023
+ panel.addForm("Test form", formData, (value, event) => {
1024
+ console.log(value);
1025
+ }, { skipLabels: false, primaryActionName: "Login", secondaryActionName: "Sign Up", secondaryActionCallback: () => { console.log("Signed up") } });
1026
+
1027
+ panel.addLabel("Or", { float: 'center' });
1028
+
1029
+ panel.addButton(null, "Sign up", (value, event) => { });
1030
+
1031
+ }, { close: true, minimize: false, size: ["25%"], scroll: true, resizable: true, draggable: true });
1032
+ }
1033
+
1034
+ function createAssetDialog() {
1035
+
1036
+ let dialog = new LX.Dialog('Non Manual Features lexemes', (p) => {
1037
+
1038
+ const previewActions = [
1039
+ {
1040
+ name: 'Print Clip',
1041
+ type: 'clip',
1042
+ callback: (item) => {
1043
+ console.log(item);
1044
+ }
1045
+ },
1046
+ {
1047
+ name: 'Print Image',
1048
+ type: 'image',
1049
+ callback: (item) => {
1050
+ console.log(item);
1051
+ }
1052
+ },
1053
+ {
1054
+ name: 'Common',
1055
+ callback: (item) => {
1056
+ console.log(item);
1057
+ }
1058
+ }
1059
+ ];
1060
+
1061
+ var assetView = new LX.AssetView({
1062
+ skipBrowser: true,
1063
+ skipNavigation: true,
1064
+ previewActions: previewActions
1065
+ });
1066
+
1067
+ p.attach(assetView);
1068
+ let assetData = [];
1069
+ const values = ['brow_lowerer.png', 'godot_pixelart.png', 'godot_canvas.png'];
1070
+
1071
+ for (let i = 0; i < values.length; i++) {
1072
+ let data = {
1073
+ id: values[i],
1074
+ type: i == 0 ? "clip" : "image",
1075
+ src: "../data/" + values[i].toLowerCase(),
1076
+ }
1077
+ assetData.push(data);
1078
+ }
1079
+
1080
+ assetView.load(assetData, (e, v) => {
1081
+ switch (e.type) {
1082
+ case LX.AssetViewEvent.ASSET_SELECTED:
1083
+ if (e.multiple)
1084
+ console.log("Selected: ", e.item);
1085
+ else
1086
+ console.log(e.item.id + " selected");
1087
+ break;
1088
+ case LX.AssetViewEvent.ASSET_DELETED:
1089
+ console.log(e.item.id + " deleted");
1090
+ break;
1091
+ case LX.AssetViewEvent.ASSET_CLONED:
1092
+ console.log(e.item.id + " cloned");
1093
+ break;
1094
+ case LX.AssetViewEvent.ASSET_RENAMED:
1095
+ console.log(e.item.id + " is now called " + e.value);
1096
+ break;
1097
+ }
1098
+ })
1099
+ }, { title: 'Lexemes', close: true, minimize: false, size: ["80%"], scroll: true, resizable: true, draggable: true });
1100
+ }
1101
+
1102
+ </script>
1103
+
1104
+ </html>