lexgui 8.1.1 → 8.2.0

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 (52) hide show
  1. package/build/components/Avatar.d.ts +15 -0
  2. package/build/components/NodeTree.d.ts +51 -26
  3. package/build/components/Vector.d.ts +10 -9
  4. package/build/core/Event.d.ts +6 -26
  5. package/build/core/Namespace.js +1 -1
  6. package/build/core/Namespace.js.map +1 -1
  7. package/build/core/Panel.d.ts +538 -538
  8. package/build/extensions/AssetView.d.ts +7 -6
  9. package/build/extensions/AssetView.js +194 -155
  10. package/build/extensions/AssetView.js.map +1 -1
  11. package/build/extensions/Audio.js.map +1 -1
  12. package/build/extensions/CodeEditor.d.ts +358 -350
  13. package/build/extensions/CodeEditor.js +5054 -5022
  14. package/build/extensions/CodeEditor.js.map +1 -1
  15. package/build/extensions/DocMaker.js +330 -327
  16. package/build/extensions/DocMaker.js.map +1 -1
  17. package/build/extensions/GraphEditor.js +2754 -2760
  18. package/build/extensions/GraphEditor.js.map +1 -1
  19. package/build/extensions/Timeline.d.ts +668 -670
  20. package/build/extensions/Timeline.js +3948 -3955
  21. package/build/extensions/Timeline.js.map +1 -1
  22. package/build/extensions/VideoEditor.d.ts +128 -128
  23. package/build/extensions/VideoEditor.js +893 -898
  24. package/build/extensions/VideoEditor.js.map +1 -1
  25. package/build/index.css.d.ts +3 -4
  26. package/build/index.d.ts +57 -56
  27. package/build/lexgui.all.js +1587 -1369
  28. package/build/lexgui.all.js.map +1 -1
  29. package/build/lexgui.all.min.js +1 -1
  30. package/build/lexgui.all.module.js +1584 -1364
  31. package/build/lexgui.all.module.js.map +1 -1
  32. package/build/lexgui.all.module.min.js +1 -1
  33. package/build/lexgui.css +6157 -5583
  34. package/build/lexgui.js +977 -815
  35. package/build/lexgui.js.map +1 -1
  36. package/build/lexgui.min.css +2 -3
  37. package/build/lexgui.min.js +1 -1
  38. package/build/lexgui.module.js +975 -811
  39. package/build/lexgui.module.js.map +1 -1
  40. package/build/lexgui.module.min.js +1 -1
  41. package/changelog.md +52 -1
  42. package/demo.js +167 -65
  43. package/examples/all-components.html +38 -52
  44. package/examples/asset-view.html +27 -0
  45. package/examples/code-editor.html +1 -1
  46. package/examples/editor.html +10 -95
  47. package/examples/index.html +2 -2
  48. package/examples/side-bar.html +1 -1
  49. package/examples/timeline.html +2 -2
  50. package/examples/video-editor.html +1 -1
  51. package/examples/video-editor2.html +2 -2
  52. package/package.json +7 -4
package/examples/all-components.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <head>
6
6
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
7
7
  <title>LexGUI demo</title>
8
- <link rel="stylesheet" href="../build/lexgui.css">
8
+ <link rel="stylesheet" href="../css/output.css">
9
9
  <link rel="icon" href="../images/favicon.png">
10
10
 
11
11
  <script type="importmap">
@@ -32,7 +32,7 @@
32
32
  let area = await LX.init();
33
33
 
34
34
  const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
35
- const starterTheme = LX.getTheme();
35
+ const starterTheme = LX.getMode();
36
36
  const menubar = area.addMenubar( [], { sticky: false } );
37
37
  menubar.addButtons([
38
38
  {
@@ -44,7 +44,7 @@
44
44
  title: "Change Theme",
45
45
  icon: "Moon",
46
46
  swap: "Sun",
47
- callback: (swapValue) => { LX.setTheme(swapValue ? "light" : "dark") }
47
+ callback: (swapValue) => { LX.setMode(swapValue ? "light" : "dark") }
48
48
  },
49
49
  {
50
50
  title: "Switch Spacing",
@@ -129,30 +129,28 @@
129
129
  }
130
130
 
131
131
  buttonsLeftPanel.branch("Classic Buttons", { closed: closedDefault });
132
- buttonsLeftPanel.addButton(null, "Classic", null);
133
132
  buttonsLeftPanel.addButton(null, "Primary", null, { buttonClass: "primary" });
134
133
  buttonsLeftPanel.addButton(null, "Secondary", null, { buttonClass: "secondary" });
135
- buttonsLeftPanel.addButton(null, "Accent", null, { buttonClass: "accent" });
136
- buttonsLeftPanel.addButton(null, "Contrast", null, { buttonClass: "contrast" });
134
+ buttonsLeftPanel.addButton(null, "Ghost", null, { buttonClass: "ghost" });
135
+ buttonsLeftPanel.addButton(null, "Link", null, { buttonClass: "link" });
136
+ buttonsLeftPanel.addButton(null, "Muted", null, { buttonClass: "muted" });
137
137
  buttonsLeftPanel.addButton(null, "Success", null, { buttonClass: "success" });
138
- buttonsLeftPanel.addButton(null, "Error", null, { buttonClass: "error" });
139
138
  buttonsLeftPanel.addButton(null, "Warning", null, { buttonClass: "warning" });
139
+ buttonsLeftPanel.addButton(null, "Destructive", null, { buttonClass: "destructive" });
140
140
  buttonsLeftPanel.branch("Disabled Buttons", { closed: closedDefault });
141
- buttonsLeftPanel.addButton(null, "Classic", null, { disabled: true });
142
141
  buttonsLeftPanel.addButton(null, "Primary", null, { disabled: true, buttonClass: "primary" });
143
142
  buttonsLeftPanel.addButton(null, "Secondary", null, { disabled: true, buttonClass: "secondary" });
144
- buttonsLeftPanel.addButton(null, "Accent", null, { disabled: true, buttonClass: "accent" });
145
- buttonsLeftPanel.addButton(null, "Contrast", null, { disabled: true, buttonClass: "contrast" });
143
+ buttonsLeftPanel.addButton(null, "Muted", null, { disabled: true, buttonClass: "muted" });
146
144
  buttonsLeftPanel.addButton(null, "Success", null, { disabled: true, buttonClass: "success" });
147
- buttonsLeftPanel.addButton(null, "Error", null, { disabled: true, buttonClass: "error" });
148
145
  buttonsLeftPanel.addButton(null, "Warning", null, { disabled: true, buttonClass: "warning" });
146
+ buttonsLeftPanel.addButton(null, "Destructive", null, { disabled: true, buttonClass: "destructive" });
149
147
  buttonsLeftPanel.branch("Advanced Buttons", { closed: closedDefault });
150
148
  buttonsLeftPanel.addButton("Icon Button", "Not used", null, { icon: "Skull" });
151
149
  buttonsLeftPanel.sameLine();
152
150
  buttonsLeftPanel.addLabel("Customized Inline Buttons");
153
- buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Skull", buttonClass: "bg-none" });
154
- buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Box", buttonClass: "bg-primary" });
155
- buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Grid3x3", buttonClass: "bg-tertiary fg-tertiary" });
151
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Skull", buttonClass: "ghost" });
152
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Box", buttonClass: "primary" });
153
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Grid3x3", buttonClass: "muted" });
156
154
  buttonsLeftPanel.endLine("justify-start");
157
155
  buttonsLeftPanel.sameLine();
158
156
  buttonsLeftPanel.addLabel("Swap Buttons");
@@ -160,25 +158,21 @@
160
158
  buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Eye", swap: "EyeOff" });
161
159
  buttonsLeftPanel.endLine("justify-start");
162
160
  buttonsLeftPanel.addButton(null, LX.makeIcon("CirclePlus").innerHTML + "Button with Inlined Icon", null);
163
- buttonsLeftPanel.addButton(null, "With a Badge" + LX.badge("+99", "accent sm"));
161
+ buttonsLeftPanel.addButton(null, "With a Badge" + LX.badge("+99", "primary xs"));
164
162
  buttonsRightPanel.branch("Outline Buttons", { closed: closedDefault });
165
- buttonsRightPanel.addButton(null, "Classic Outline", null, { buttonClass: "outline" });
166
- buttonsRightPanel.addButton(null, "Primary Outline", null, { buttonClass: "primary outline" });
167
163
  buttonsRightPanel.addButton(null, "Secondary Outline", null, { buttonClass: "secondary outline" });
168
- buttonsRightPanel.addButton(null, "Accent Outline", null, { buttonClass: "accent outline" });
169
- buttonsRightPanel.addButton(null, "Contrast Outline", null, { buttonClass: "contrast outline" });
164
+ buttonsRightPanel.addButton(null, "Link Outline", null, { buttonClass: "link outline" });
165
+ buttonsRightPanel.addButton(null, "Muted Outline", null, { buttonClass: "muted outline" });
170
166
  buttonsRightPanel.addButton(null, "Success Outline", null, { buttonClass: "success outline" });
171
- buttonsRightPanel.addButton(null, "Error Outline", null, { buttonClass: "error outline" });
172
167
  buttonsRightPanel.addButton(null, "Warning Outline", null, { buttonClass: "warning outline" });
168
+ buttonsRightPanel.addButton(null, "Destructive Outline", null, { buttonClass: "destructive outline" });
173
169
  buttonsRightPanel.branch("Dashed Buttons", { closed: closedDefault });
174
- buttonsRightPanel.addButton(null, "Classic Dashed", null, { buttonClass: "dashed" });
175
170
  buttonsRightPanel.addButton(null, "Primary Dashed", null, { buttonClass: "primary dashed" });
176
171
  buttonsRightPanel.addButton(null, "Secondary Dashed", null, { buttonClass: "secondary dashed" });
177
- buttonsRightPanel.addButton(null, "Accent Dashed", null, { buttonClass: "accent dashed" });
178
- buttonsRightPanel.addButton(null, "Contrast Dashed", null, { buttonClass: "contrast dashed" });
172
+ buttonsRightPanel.addButton(null, "Muted Dashed", null, { buttonClass: "muted dashed" });
179
173
  buttonsRightPanel.addButton(null, "Success Dashed", null, { buttonClass: "success dashed" });
180
- buttonsRightPanel.addButton(null, "Error Dashed", null, { buttonClass: "error dashed" });
181
174
  buttonsRightPanel.addButton(null, "Warning Dashed", null, { buttonClass: "warning dashed" });
175
+ buttonsRightPanel.addButton(null, "Destructive Dashed", null, { buttonClass: "destructive dashed" });
182
176
  buttonsRightPanel.branch("Combo Buttons", { closed: closedDefault });
183
177
  buttonsRightPanel.addComboButtons("Classic Combo", comboValues);
184
178
  buttonsRightPanel.addComboButtons("Toggle Combo", comboValues, { toggle: true });
@@ -206,43 +200,39 @@
206
200
  // Test Checkboxes
207
201
  {
208
202
  checkLeftPanel.branch("Checkboxes", { closed: closedDefault });
209
- checkLeftPanel.addCheckbox(null, true, null, { className: "x", label: "Classic" });
210
203
  checkLeftPanel.addCheckbox(null, true, null, { className: "primary", label: "Primary" });
211
204
  checkLeftPanel.addCheckbox(null, true, null, { className: "secondary", label: "Secondary" });
212
- checkLeftPanel.addCheckbox(null, true, null, { className: "accent", label: "Accent" });
213
- checkLeftPanel.addCheckbox(null, true, null, { className: "contrast", label: "Contrast" });
214
205
  checkLeftPanel.addCheckbox(null, true, null, { className: "success", label: "Success" });
215
- checkLeftPanel.addCheckbox(null, true, null, { className: "error", label: "Error" });
216
206
  checkLeftPanel.addCheckbox(null, true, null, { className: "warning", label: "Warning" });
207
+ checkLeftPanel.addCheckbox(null, true, null, { className: "destructive", label: "Destructive" });
217
208
  }
218
209
 
219
210
  // Radiogroup
220
211
  {
221
212
  checkLeftPanel.branch("Radio Group", { closed: closedDefault });
222
- checkLeftPanel.addRadioGroup(null, "Notify me about...", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "accent", xdisabled: true, selected: 1 });
213
+ checkLeftPanel.addRadioGroup(null, "Primary Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "primary", selected: 1 });
214
+ checkLeftPanel.addRadioGroup(null, "Secondary Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "secondary", selected: 1 });
215
+ checkLeftPanel.addRadioGroup(null, "Success Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "success", selected: 1 });
216
+ checkLeftPanel.addRadioGroup(null, "Warning Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "warning", selected: 1 });
217
+ checkLeftPanel.addRadioGroup(null, "Destructive Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "destructive", selected: 1 });
223
218
  checkLeftPanel.addRadioGroup(null, "Disabled Options...", ["All new messages", "Direct messages and mentions", "Nothing"], null, { disabled: true, selected: 1 });
224
219
  }
225
220
 
226
221
  // Test Toggles
227
222
  {
228
223
  checkRightPanel.branch("Classic Toggles", { closed: closedDefault });
229
- checkRightPanel.addToggle(null, true, null, { label: "Classic" });
230
224
  checkRightPanel.addToggle(null, true, null, { className: "primary", label: "Primary" });
231
225
  checkRightPanel.addToggle(null, true, null, { className: "secondary", label: "Secondary" });
232
- checkRightPanel.addToggle(null, true, null, { className: "accent", label: "Accent" });
233
- checkRightPanel.addToggle(null, true, null, { className: "contrast", label: "Contrast" });
234
226
  checkRightPanel.addToggle(null, true, null, { className: "success", label: "Success" });
235
- checkRightPanel.addToggle(null, true, null, { className: "error", label: "Error" });
236
227
  checkRightPanel.addToggle(null, true, null, { className: "warning", label: "Warning" });
228
+ checkRightPanel.addToggle(null, true, null, { className: "destructive", label: "Destructive" });
229
+ checkRightPanel.addToggle(null, true, null, { className: "", label: "Disabled", disabled: true });
237
230
  checkRightPanel.branch("Outline Toggles", { closed: closedDefault });
238
- checkRightPanel.addToggle(null, true, null, { label: "Classic" });
239
231
  checkRightPanel.addToggle(null, true, null, { className: "primary outline", label: "Primary" });
240
232
  checkRightPanel.addToggle(null, true, null, { className: "secondary outline", label: "Secondary" });
241
- checkRightPanel.addToggle(null, true, null, { className: "accent outline", label: "Accent" });
242
- checkRightPanel.addToggle(null, true, null, { className: "contrast outline", label: "Contrast" });
243
233
  checkRightPanel.addToggle(null, true, null, { className: "success outline", label: "Success" });
244
- checkRightPanel.addToggle(null, true, null, { className: "error outline", label: "Error" });
245
234
  checkRightPanel.addToggle(null, true, null, { className: "warning outline", label: "Warning" });
235
+ checkRightPanel.addToggle(null, true, null, { className: "destructive outline", label: "Destructive" });
246
236
  }
247
237
 
248
238
  // Test Inputs
@@ -283,14 +273,11 @@
283
273
  panelB.addColor("Color With Alpha", "#47c1b7ff");
284
274
  panelB.addColor("Disabled Color", "#b7a9b1", null, { disabled: true });
285
275
  panelB.branch("Range Inputs", { closed: closedDefault });
286
- panelB.addRange("Classic", 1, null, { min: 0, max: 10, step: 1 });
287
276
  panelB.addRange("Primary", 7, null, { min: 0, max: 10, step: 1, className: "primary" });
288
277
  panelB.addRange("Secondary", 4, null, { min: 0, max: 10, step: 1, className: "secondary" });
289
- panelB.addRange("Accent", 3, null, { min: 0, max: 10, step: 1, className: "accent" });
290
- panelB.addRange("Contrast", 5, null, { min: 0, max: 10, step: 1, className: "contrast" });
291
278
  panelB.addRange("Success", 9, null, { min: 0, max: 10, step: 1, className: "success" });
292
- panelB.addRange("Error", 6, null, { min: 0, max: 10, step: 1, className: "error" });
293
279
  panelB.addRange("Warning", 2, null, { min: 0, max: 10, step: 1, className: "warning" });
280
+ panelB.addRange("Destructive", 6, null, { min: 0, max: 10, step: 1, className: "destructive" });
294
281
  panelB.addRange("Inverted", 22, null, { min: 20, max: 48, step: 1, left: true });
295
282
  panelB.addRange("NoFill", 10, null, { min: 1, max: 48, step: 1, fill: false });
296
283
  panelB.addRange("With Range", [2, 6], null, { min: 1, max: 10, step: 1 });
@@ -298,7 +285,7 @@
298
285
  panelB.branch("Select Inputs", { closed: closedDefault });
299
286
  panelB.addSelect("Classic", selectValues, "Unity", null);
300
287
  panelB.addSelect("With Suboptions", selectValues, "Unity", null, { on_Unity: (p) => {
301
- p.addButton("Unity Button", "Click me!", null, { buttonClass: "contrast" });
288
+ p.addButton("Unity Button", "Click me!", null, { buttonClass: "primary" });
302
289
  } });
303
290
  panelB.addSelect("With Labels", selectValuesWithLabels, "Unity", null);
304
291
  panelB.addSelect("With Filter", selectValuesWithLabels, "Godot", null, { filter: true, placeholder: "Search tools..." });
@@ -389,16 +376,7 @@
389
376
 
390
377
  panelC.addTree(null, sceneData, {
391
378
  icons: treeIcons,
392
- addDefault: true,
393
- onevent: (event) => {
394
- switch (event.type) {
395
- case LX.TreeEvent.NODE_CONTEXTMENU:
396
- const m = event.panel;
397
- m.add("Components/Transform");
398
- m.add("Components/MeshRenderer");
399
- break;
400
- }
401
- }
379
+ addDefault: true
402
380
  });
403
381
  }
404
382
 
@@ -410,6 +388,14 @@
410
388
  panelC.addList("String List with Icons", [['GPTeam', 'Gpu'], ['Blat Bunny', 'Bone'], ['Blat Panthers', 'PawPrint']], 'Blat Panthers');
411
389
  }
412
390
 
391
+ // List
392
+ {
393
+ panelC.branch("Array", { closed: closedDefault });
394
+ panelC.addArray("Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
395
+ console.log(value);
396
+ });
397
+ }
398
+
413
399
  // Table
414
400
  {
415
401
  panelC.branch("Tables", { closed: closedDefault });
package/examples/asset-view.html CHANGED
@@ -122,6 +122,9 @@
122
122
  {
123
123
  id: "godot",
124
124
  type: "folder",
125
+ metadata: {
126
+ draggable: false
127
+ },
125
128
  children: [
126
129
  {
127
130
  id: "color.png",
@@ -327,6 +330,30 @@
327
330
  } );
328
331
  }
329
332
 
333
+ // Content events
334
+ {
335
+ assetView.on( "beforeRefreshContent", ( event, resolve ) => {
336
+ resolve();
337
+ } );
338
+
339
+ assetView.on( "refreshContent", ( event ) => {
340
+ console.log(`Content updated (${ event.items.length } items) [${ event.search.join( "," ) }]` );
341
+ } );
342
+ }
343
+
344
+ // Explorer dragging events
345
+ {
346
+ assetView.on( "beforeNodeDragged", ( event, resolve ) => {
347
+ LX.prompt(`"${ event.items[ 0 ].id }" will be dragged to "${ event.to.id }". Continue?`, "Server Message", () => {
348
+ resolve();
349
+ })
350
+ } );
351
+
352
+ assetView.on( "nodeDragged", ( event ) => {
353
+ console.log(`${ event.items[ 0 ].id } dragged to ${ event.to.id }` );
354
+ } );
355
+ }
356
+
330
357
  assetView.load( assetData );
331
358
 
332
359
  function loop( dt )
package/examples/code-editor.html CHANGED
@@ -20,7 +20,7 @@
20
20
  <script type="module">
21
21
 
22
22
  import { LX } from 'lexgui';
23
- import { CodeEditor } from 'lexgui/extensions/codeeditor.js';
23
+ import { CodeEditor } from 'lexgui/extensions/CodeEditor.js';
24
24
 
25
25
  CodeEditor.debugScopes = false;
26
26
  CodeEditor.debugSymbols = false;
package/examples/editor.html CHANGED
@@ -26,9 +26,9 @@
26
26
  <script type="module">
27
27
 
28
28
  import { LX } from 'lexgui';
29
- import 'lexgui/extensions/codeeditor.js';
30
- import 'lexgui/extensions/timeline.js';
31
- import 'lexgui/extensions/audio.js';
29
+ import 'lexgui/extensions/CodeEditor.js';
30
+ import 'lexgui/extensions/Timeline.js';
31
+ import 'lexgui/extensions/Audio.js';
32
32
 
33
33
  window.LX = LX;
34
34
 
@@ -43,11 +43,6 @@
43
43
  // LX.message("Im in another position", null, { position: [10, 10] });
44
44
  // LX.message("Welcome to Lexgui", "Welcome!");
45
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
46
  LX.toast("Scheduled: Catch up", "Friday, February 10, 2023 at 5:57 PM", {
52
47
  action: {
53
48
  name: "Undo", callback: (toast, actionName, event) => {
@@ -205,7 +200,7 @@
205
200
 
206
201
  ], { sticky: false });
207
202
 
208
- const starterTheme = LX.getTheme();
203
+ const starterTheme = LX.getMode();
209
204
 
210
205
  menubar.addButtons([
211
206
  {
@@ -234,7 +229,7 @@
234
229
  title: "Switch Theme",
235
230
  icon: starterTheme == "dark" ? "Moon" : "Sun",
236
231
  swap: starterTheme == "dark" ? "Sun" : "Moon",
237
- callback: (value, event) => { LX.switchTheme() }
232
+ callback: (value, event) => { LX.switchMode() }
238
233
  },
239
234
  {
240
235
  title: "Switch Spacing",
@@ -258,12 +253,10 @@
258
253
 
259
254
  var kfTimeline = null;
260
255
  var clipsTimeline = null;
261
- var curvesTimeline = null;
262
256
 
263
257
  bottom.onresize = bounding => {
264
258
  if (kfTimeline) kfTimeline.resize([bounding.width, bounding.height]);
265
259
  if (clipsTimeline) clipsTimeline.resize([bounding.width, bounding.height]);
266
- if (curvesTimeline) curvesTimeline.resize([bounding.width, bounding.height]);
267
260
  }
268
261
 
269
262
  // another menu bar
@@ -275,9 +268,6 @@
275
268
  if (el)
276
269
  el.style.display = 'none';
277
270
  el = document.getElementById('clips-timeline');
278
- if (el)
279
- el.style.display = 'none';
280
- el = document.getElementById('curves-timeline');
281
271
  if (el)
282
272
  el.style.display = 'none';
283
273
  var bottomPanel = document.getElementById('bottom-panel');
@@ -291,9 +281,6 @@
291
281
  if (el)
292
282
  el.style.display = 'none';
293
283
  el = document.getElementById('clips-timeline');
294
- if (el)
295
- el.style.display = 'none';
296
- el = document.getElementById('curves-timeline');
297
284
  if (el)
298
285
  el.style.display = 'none';
299
286
  var timeline = document.getElementById('kf-timeline');
@@ -330,9 +317,6 @@
330
317
  el.style.display = 'none';
331
318
 
332
319
  el = document.getElementById('kf-timeline');
333
- if (el)
334
- el.style.display = 'none';
335
- el = document.getElementById('curves-timeline');
336
320
  if (el)
337
321
  el.style.display = 'none';
338
322
  var ctimeline = document.getElementById('clips-timeline');
@@ -360,35 +344,7 @@
360
344
  clipsTimeline.draw(0);
361
345
  }
362
346
  }
363
- },
364
- {
365
- name: "Curves Timeline", callback: e => {
366
- console.log(e);
367
- let el = document.getElementById('bottom-panel');
368
- if (el)
369
- el.style.display = 'none';
370
- el = document.getElementById('kf-timeline');
371
- if (el)
372
- el.style.display = 'none';
373
- el = document.getElementById('clips-timeline');
374
- if (el)
375
- el.style.display = 'none';
376
-
377
- var timeline = document.getElementById('curves-timeline');
378
- if (timeline) {
379
- timeline.style.display = 'block';
380
- curvesTimeline.resize();
381
- }
382
- else {
383
- curvesTimeline = new LX.CurvesTimeline("curves-timeline");
384
- 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 });
385
- curvesTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
386
- bottom.attach(curvesTimeline.mainArea);
387
- curvesTimeline.resize();
388
- curvesTimeline.draw(0);
389
- }
390
- }
391
- },
347
+ }
392
348
 
393
349
  ]);
394
350
 
@@ -398,9 +354,6 @@
398
354
 
399
355
  if (kfTimeline)
400
356
  kfTimeline.resize();
401
-
402
- if (curvesTimeline)
403
- curvesTimeline.resize();
404
357
  }
405
358
 
406
359
  var bottomPanel = bottom.addPanel({ id: "bottom-panel" });
@@ -507,7 +460,7 @@
507
460
  filter: true,
508
461
  footerTitle: "jxarco",
509
462
  footerSubtitle: "alexroco.30@gmail.com",
510
- footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
463
+ footerImage: "https://avatars.githubusercontent.com/u/25059187?v=4",
511
464
  });
512
465
 
513
466
  new LX.Sheet("256px", [area]);
@@ -550,9 +503,6 @@
550
503
  if (clipsTimeline)
551
504
  clipsTimeline.draw();
552
505
 
553
- if (curvesTimeline)
554
- curvesTimeline.draw();
555
-
556
506
  requestAnimationFrame(loop);
557
507
  }
558
508
 
@@ -629,42 +579,7 @@
629
579
  window.tree = panel.addTree("Scene Tree", sceneData, {
630
580
  icons: treeIcons,
631
581
  // filter: false,
632
- addDefault: true,
633
- onevent: (event) => {
634
- console.log(event.string());
635
-
636
- switch (event.type) {
637
- case LX.TreeEvent.NODE_SELECTED:
638
- if (event.multiple)
639
- console.log("Selected: ", event.value);
640
- else
641
- console.log(event.node.id + " selected");
642
- break;
643
- case LX.TreeEvent.NODE_DELETED:
644
- if (event.multiple)
645
- console.log("Deleted: ", event.value);
646
- else
647
- console.log(event.node.id + " deleted");
648
- break;
649
- case LX.TreeEvent.NODE_DBLCLICKED:
650
- console.log(event.node.id + " dbl clicked");
651
- break;
652
- case LX.TreeEvent.NODE_CONTEXTMENU:
653
- const m = event.panel;
654
- m.add("Components/Transform");
655
- m.add("Components/MeshRenderer");
656
- break;
657
- case LX.TreeEvent.NODE_DRAGGED:
658
- console.log(event.node.id + " is now child of " + event.value.id);
659
- break;
660
- case LX.TreeEvent.NODE_RENAMED:
661
- console.log(event.node.id + " is now called " + event.value);
662
- break;
663
- case LX.TreeEvent.NODE_VISIBILITY:
664
- console.log(event.node.id + " visibility: " + event.value);
665
- break;
666
- }
667
- }
582
+ addDefault: true
668
583
  });
669
584
 
670
585
  // add components to panel branch
@@ -961,7 +876,7 @@
961
876
  { name: "Make a copy", callback: (a) => console.log(a) },
962
877
  { name: "Favourite", callback: (a) => console.log(a) },
963
878
  null,
964
- { name: "Delete", icon: "Trash2", className: "fg-error", callback: (a) => console.log(a) },
879
+ { name: "Delete", icon: "Trash2", className: "text-destructive", callback: (a) => console.log(a) },
965
880
  ]
966
881
  }
967
882
  });
@@ -1041,7 +956,7 @@
1041
956
  LX.toast( "Signed Up!", "Validate your email before login.");
1042
957
  }
1043
958
  }, { primaryActionName: "SignUp" });
1044
- const errorMsg = p.addTextArea( null, "", null, { inputClass: "fg-secondary", disabled: true, fitHeight: true } );
959
+ const errorMsg = p.addTextArea( null, "", null, { disabled: true, fitHeight: true } );
1045
960
  }, { modal: true } );
1046
961
  }
1047
962
 
package/examples/index.html CHANGED
@@ -105,8 +105,8 @@
105
105
  for( let ex of examples )
106
106
  {
107
107
  const id = ex.replace(" ", "-").toLowerCase();
108
- const title = LX.makeContainer( ["auto", "auto"], "p-2 text-md fg-secondary font-semibold", ex, panel );
109
- const container = LX.makeContainer( ["100%", "auto"], "border overflow-hidden rounded-xl cursor-pointer", "", panel );
108
+ const title = LX.makeContainer( ["auto", "auto"], "p-2 text-base font-semibold", ex, panel );
109
+ const container = LX.makeContainer( ["100%", "auto"], "border-color overflow-hidden rounded-xl cursor-pointer", "", panel );
110
110
  const image = document.createElement( "img" );
111
111
  image.src = "previews/" + id + ".png";
112
112
  image.className = "w-full h-32 hover:scale-lg";
package/examples/side-bar.html CHANGED
@@ -68,7 +68,7 @@
68
68
  headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/favicon.png",
69
69
  footerTitle: "jxarco",
70
70
  footerSubtitle: "alexroco.30@gmail.com",
71
- footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
71
+ footerImage: "https://avatars.githubusercontent.com/u/25059187?v=4",
72
72
  onHeaderPressed: (e) => { console.log("onHeaderPressed") },
73
73
  onFooterPressed: (e) => { console.log("onFooterPressed") }
74
74
  });
package/examples/timeline.html CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
  if(mode == types.KEYFRAMES) {
96
96
  let ctx = canvas.getContext("2d");
97
- ctx.fillStyle = LX.getThemeColor("global-color-accent");
97
+ ctx.fillStyle = LX.getCSSVariable("color-blue-500");
98
98
  ctx.fillRect(0, 0, canvas.width, canvas.height);
99
99
  ctx.font = panel.getValue('Font Size') + "px Monospace";
100
100
  ctx.fillStyle = panel.getValue('Font Color');
@@ -115,7 +115,7 @@
115
115
  function fillPanel( panel ) {
116
116
  panel.clear();
117
117
  panel.branch("Canvas", {icon: "Palette", filter: true});
118
- panel.addColor("Background", LX.getThemeColor("global-color-accent"));
118
+ panel.addColor("Background", LX.getCSSVariable("color-blue-500"));
119
119
  panel.addText("Track", trackName, (value, event) =>{
120
120
  const visibleItems = activeTimeline.getVisibleItems();
121
121
  for ( let i = 0; i < visibleItems.length; ++i ) {
package/examples/video-editor.html CHANGED
@@ -189,7 +189,7 @@
189
189
  canvas.width = video.clientWidth;
190
190
  canvas.height = video.clientHeight;
191
191
  const ctx = canvas.getContext("2d");
192
- ctx.fillStyle = LX.getThemeColor("global-selected-light");
192
+ ctx.fillStyle = LX.getCSSVariable("color-blue-400");
193
193
  ctx.font = "40px Arial";
194
194
  ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
195
195
 
package/examples/video-editor2.html CHANGED
@@ -48,7 +48,7 @@
48
48
  canvas.width = video.clientWidth;
49
49
  canvas.height = video.clientHeight;
50
50
  const ctx = canvas.getContext("2d");
51
- ctx.fillStyle = LX.getThemeColor("global-selected-light");
51
+ ctx.fillStyle = LX.getCSSVariable("color-blue-400");
52
52
  ctx.font = "40px Arial";
53
53
  ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
54
54
 
@@ -60,7 +60,7 @@
60
60
  canvas.width = video.clientWidth;
61
61
  canvas.height = video.clientHeight;
62
62
  const ctx = canvas.getContext("2d");
63
- ctx.fillStyle = LX.getThemeColor("global-selected-light");
63
+ ctx.fillStyle = LX.getCSSVariable("color-blue-400");
64
64
  ctx.font = "40px Arial";
65
65
  ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
66
66
  //videoEditor.timebar.resize(size)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lexgui",
3
- "version": "8.1.1",
3
+ "version": "8.2.0",
4
4
  "description": "JS library to create web graphical user interfaces",
5
5
  "type": "module",
6
6
  "main": "./build/lexgui.js",
@@ -41,17 +41,19 @@
41
41
  "scripts": {
42
42
  "format": "dprint fmt",
43
43
  "format:check": "dprint check",
44
- "colors": "node generate-colors.js",
45
44
  "clean:css": "rimraf build/lexgui.css && rimraf build/lexgui.min.css",
46
45
  "clean": "rimraf build",
47
- "bundle": "rollup -c",
48
- "bundle:ts": "rollup -c rollup.ts.build.config.js",
46
+ "build:css": "npx @tailwindcss/cli -i ./css/lexgui.css -o ./css/output.css",
47
+ "build:cssw": "npx @tailwindcss/cli -i ./css/lexgui.css -o ./css/output.css --watch",
48
+ "bundle": "npm run build:css && rollup -c",
49
+ "bundle:ts": "npm run build:css && rollup -c rollup.ts.build.config.js",
49
50
  "build:ts": "tsc --project tsconfig.all.json",
50
51
  "build": "npm run bundle:ts"
51
52
  },
52
53
  "devDependencies": {
53
54
  "@rollup/plugin-alias": "^6.0.0",
54
55
  "@rollup/plugin-terser": "^0.4.4",
56
+ "@tailwindcss/cli": "^4.1.18",
55
57
  "cssnano": "^7.1.2",
56
58
  "dprint": "^0.50.2",
57
59
  "postcss": "^8.5.6",
@@ -59,6 +61,7 @@
59
61
  "rollup": "^4.53.2",
60
62
  "rollup-plugin-postcss": "^4.0.2",
61
63
  "rollup-plugin-typescript2": "^0.36.0",
64
+ "tailwindcss": "^4.1.18",
62
65
  "typescript": "^5.9.3"
63
66
  }
64
67
  }