lexgui 0.5.2 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/build/components/audio.js +7 -7
  2. package/build/components/timeline.js +3 -3
  3. package/build/lexgui.css +484 -552
  4. package/build/lexgui.js +396 -182
  5. package/build/lexgui.min.css +4 -3
  6. package/build/lexgui.min.js +1 -1
  7. package/build/lexgui.module.js +396 -182
  8. package/build/lexgui.module.min.js +1 -1
  9. package/build/utilities.css +314 -0
  10. package/changelog.md +30 -1
  11. package/demo.js +434 -49
  12. package/examples/all_widgets.html +368 -0
  13. package/examples/area_tabs.html +94 -86
  14. package/examples/asset_view.html +183 -180
  15. package/examples/code_editor.html +62 -61
  16. package/examples/dialogs.html +97 -94
  17. package/examples/immediate_ui.html +44 -42
  18. package/examples/index.html +4 -7
  19. package/examples/node_graph.html +39 -36
  20. package/examples/previews/all_widgets.png +0 -0
  21. package/examples/side_bar.html +93 -90
  22. package/examples/timeline.html +4 -4
  23. package/examples/video_editor.html +38 -35
  24. package/examples/video_editor2.html +84 -79
  25. package/package.json +1 -1
package/examples/dialogs.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
2
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+
3
4
  <head>
4
5
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
6
  <title>LexGUI Dialogs Demo</title>
@@ -14,101 +15,103 @@
14
15
  }
15
16
  </script>
16
17
  </head>
18
+
17
19
  <body></body>
18
- <script type="module">
19
-
20
- import { LX } from 'lexgui';
21
-
22
- // Init library and get main area
23
- let area = LX.init({ skip_default_area: true });
24
-
25
- LX.popup("Hello! I'm a popup dialog :)", null, { position: ["45%", "20%"] })
26
-
27
- const pocketDialog = new LX.PocketDialog("Load Settings", p => {
28
-
29
- p.branch("Canvas");
30
- p.addColor("Background", "#b7a9b1");
31
- p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
32
- p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
33
- console.log("Font Color: ", value);
34
- });
35
- p.addNumber("Font Size", 36, (value, event) => {
36
- console.log(value);
37
- }, { min: 1, max: 48, step: 1});
38
- p.addVector2("2D Position", [250, 350], (value, event) => {
39
- console.log(value);
40
- }, { min: 0, max: 1024 });
41
-
42
- p.branch("Project");
43
- p.addText("Name", "Lexgui.js");
44
- p.addButton(null, "Export");
45
- p.merge();
46
- }, { float: 'lt' } );
47
-
48
- const dialogClosable = new LX.Dialog("Closable Dialog", p => {
49
-
50
- p.branch("Canvas");
51
- p.addColor("Background", "#b7a9b1");
52
- p.addText("Text", "Dialog Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
53
- p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
54
- console.log("Font Color: ", value);
55
- });
56
- p.addNumber("Font Size", 36, (value, event) => {
57
- console.log(value);
58
- }, { min: 1, max: 48, step: 1});
59
- p.addVector2("2D Position", [250, 350], (value, event) => {
60
- console.log(value);
61
- }, { min: 0, max: 1024 });
62
- p.merge();
63
- }, { size: ["350px", null], closable: true });
64
-
65
- const draggablePocketDialog = new LX.PocketDialog("Draggable PocketDialog", p => {
66
-
67
- p.branch("Canvas");
68
- p.addColor("Background", "#b7a9b1");
69
- p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
70
- p.addSelect("Best Engine", ["Godot", "Unity", "Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Pepe"], "Godot", (value, event) => {
71
- console.log(value);
72
- }, {filter: true});
73
- p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
74
- console.log("Font Color: ", value);
75
- });
76
- p.addNumber("Font Size", 36, (value, event) => {
77
- console.log(value);
78
- }, { min: 1, max: 48, step: 1});
79
- p.addVector2("2D Position", [250, 350], (value, event) => {
80
- console.log(value);
81
- }, { min: 0, max: 1024 });
82
- p.merge();
83
- }, { size: ["350px", null], draggable: true });
84
-
85
- // add canvas to left upper part
86
- var canvas = document.createElement('canvas');
87
- canvas.id = "mycanvas";
88
- canvas.width = window.innerWidth;
89
- canvas.height = window.innerHeight
90
- canvas.style.width = "100%";
91
- canvas.style.height = "100%";
92
- document.body.appendChild( canvas );
93
-
94
- function loop(dt) {
95
-
96
- var ctx = canvas.getContext("2d");
97
-
98
- // Get values from panel widgets (e.g. color value)
99
- ctx.fillStyle = pocketDialog.panel.getValue('Background');
100
- ctx.fillRect(0, 0, canvas.width, canvas.height);
101
-
102
- ctx.font = pocketDialog.panel.getValue('Font Size') + "px Monospace";
103
- ctx.fillStyle = pocketDialog.panel.getValue('Font Color');
104
-
105
- const text = pocketDialog.panel.getValue('Text');
106
- const pos2D = pocketDialog.panel.getValue('2D Position');
107
- ctx.fillText(text, pos2D[0], pos2D[1]);
108
-
109
- requestAnimationFrame(loop);
110
- }
20
+ <script type="module">
21
+
22
+ import { LX } from 'lexgui';
23
+
24
+ // Init library and get main area
25
+ let area = LX.init({ skip_default_area: true });
26
+
27
+ LX.popup("Hello! I'm a popup dialog :)", null, { position: ["45%", "20%"] })
28
+
29
+ const pocketDialog = new LX.PocketDialog("Load Settings", p => {
30
+ p.branch("Canvas");
31
+ p.addColor("Background", "#b7a9b1");
32
+ p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
33
+ p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
34
+ console.log("Font Color: ", value);
35
+ });
36
+ p.addNumber("Font Size", 36, (value, event) => {
37
+ console.log(value);
38
+ }, { min: 1, max: 48, step: 1 });
39
+ p.addVector2("2D Position", [250, 350], (value, event) => {
40
+ console.log(value);
41
+ }, { min: 0, max: 1024 });
42
+
43
+ p.branch("Project");
44
+ p.addText("Name", "Lexgui.js");
45
+ p.addButton(null, "Export");
46
+ p.merge();
47
+ }, { float: 'lt' });
48
+
49
+ const dialogClosable = new LX.Dialog("Closable Dialog", p => {
50
+ p.branch("Canvas");
51
+ p.addColor("Background", "#b7a9b1");
52
+ p.addText("Text", "Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
53
+ p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
54
+ console.log("Font Color: ", value);
55
+ });
56
+ p.addNumber("Font Size", 36, (value, event) => {
57
+ console.log(value);
58
+ }, { min: 1, max: 48, step: 1 });
59
+ p.addVector2("2D Position", [250, 350], (value, event) => {
60
+ console.log(value);
61
+ }, { min: 0, max: 1024 });
62
+ p.addSelect("Best Tool", ["@Engines", "Godot", "Unity", "Unreal Engine", "@Apps", "Visual Studio", "Visual Studio Code"], "Unity", (value, event) => {
63
+ console.log(value);
64
+ }, {filter: true, emptyMsg: "No engines found.", placeholder: "Search engines..."});
65
+ p.merge();
66
+ }, { size: ["350px", null], closable: true });
67
+
68
+ const draggablePocketDialog = new LX.PocketDialog("Draggable PocketDialog", p => {
69
+ p.branch("Canvas");
70
+ p.addColor("Background", "#b7a9b1");
71
+ p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
72
+ p.addSelect("Best Engine", ["Godot", "Unity", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Pepe"], "Godot", (value, event) => {
73
+ console.log(value);
74
+ }, { filter: true });
75
+ p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
76
+ console.log("Font Color: ", value);
77
+ });
78
+ p.addNumber("Font Size", 36, (value, event) => {
79
+ console.log(value);
80
+ }, { min: 1, max: 48, step: 1 });
81
+ p.addVector2("2D Position", [250, 350], (value, event) => {
82
+ console.log(value);
83
+ }, { min: 0, max: 1024 });
84
+ p.merge();
85
+ }, { size: ["350px", null], draggable: true });
86
+
87
+ // add canvas to left upper part
88
+ let canvas = document.createElement('canvas');
89
+ canvas.id = "mycanvas";
90
+ canvas.width = window.innerWidth;
91
+ canvas.height = window.innerHeight
92
+ canvas.style.width = "100%";
93
+ canvas.style.height = "100%";
94
+ document.body.appendChild(canvas);
95
+
96
+ function loop(dt) {
97
+
98
+ var ctx = canvas.getContext("2d");
99
+
100
+ // Get values from panel widgets (e.g. color value)
101
+ ctx.fillStyle = pocketDialog.panel.getValue('Background');
102
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
103
+
104
+ ctx.font = pocketDialog.panel.getValue('Font Size') + "px Monospace";
105
+ ctx.fillStyle = pocketDialog.panel.getValue('Font Color');
106
+
107
+ const text = pocketDialog.panel.getValue('Text');
108
+ const pos2D = pocketDialog.panel.getValue('2D Position');
109
+ ctx.fillText(text, pos2D[0], pos2D[1]);
111
110
 
112
111
  requestAnimationFrame(loop);
113
- </script>
112
+ }
113
+
114
+ requestAnimationFrame(loop);
115
+ </script>
116
+
114
117
  </html>
package/examples/immediate_ui.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
2
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+
3
4
  <head>
4
5
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
6
  <title>LexGUI ImUI Demo</title>
@@ -14,64 +15,65 @@
14
15
  }
15
16
  </script>
16
17
  </head>
18
+
17
19
  <body></body>
18
- <script type="module">
20
+ <script type="module">
19
21
 
20
- import { LX } from 'lexgui';
21
- import 'lexgui/components/imui.js';
22
+ import { LX } from 'lexgui';
23
+ import 'lexgui/components/imui.js';
22
24
 
23
- // init library and get main area
24
- let area = LX.init();
25
+ // init library and get main area
26
+ let area = LX.init();
25
27
 
26
- // add canvas to area
27
- var canvas = document.createElement('canvas');
28
- canvas.id = "mycanvas";
29
- canvas.width = area.root.clientWidth;
30
- canvas.height = area.root.clientHeight;
31
- canvas.style.width = "100%";
32
- canvas.style.height = "100%";
33
- area.attach( canvas );
28
+ // add canvas to area
29
+ var canvas = document.createElement('canvas');
30
+ canvas.id = "mycanvas";
31
+ canvas.width = area.root.clientWidth;
32
+ canvas.height = area.root.clientHeight;
33
+ canvas.style.width = "100%";
34
+ canvas.style.height = "100%";
35
+ area.attach(canvas);
34
36
 
35
- // add on resize event to control canvas size
36
- area.onresize = function( bounding ) {
37
- canvas.width = bounding.width;
38
- canvas.height = bounding.height;
39
- };
37
+ // add on resize event to control canvas size
38
+ area.onresize = function (bounding) {
39
+ canvas.width = bounding.width;
40
+ canvas.height = bounding.height;
41
+ };
40
42
 
41
- let im_ui = new LX.ImUI( canvas );
43
+ let im_ui = new LX.ImUI(canvas);
42
44
 
43
- function loop( time ) {
44
-
45
- var ctx = canvas.getContext("2d");
45
+ function loop(time) {
46
46
 
47
- ctx.fillStyle = "#b7a9b1";
48
- ctx.fillRect(0, 0, canvas.width, canvas.height);
47
+ var ctx = canvas.getContext("2d");
49
48
 
50
- ctx.font = "48px Monospace";
51
- ctx.fillStyle = "#ff1999";
49
+ ctx.fillStyle = "#b7a9b1";
50
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
52
51
 
53
- const text = "Lexgui.js @jxarco";
54
- ctx.fillText(text, 300, 225);
52
+ ctx.font = "48px Monospace";
53
+ ctx.fillStyle = "#ff1999";
55
54
 
56
- if( im_ui.Button( "First button", 50, 50 ) )
57
- {
58
- console.log("Button clicked!");
59
- }
55
+ const text = "Lexgui.js @jxarco";
56
+ ctx.fillText(text, 300, 225);
60
57
 
61
- im_ui.Slider( "A very cool slider", 50, 100, false, (v) => {
62
- console.log("Slider value: " + v);
63
- } );
58
+ if (im_ui.Button("First button", 50, 50)) {
59
+ console.log("Button clicked!");
60
+ }
64
61
 
65
- im_ui.Checkbox( "First checkbox", 50, 150, false, (v) => {
66
- console.log("Checkbox value: " + v);
67
- } );
62
+ im_ui.Slider("A very cool slider", 50, 100, false, (v) => {
63
+ console.log("Slider value: " + v);
64
+ });
68
65
 
69
- im_ui.endFrame();
66
+ im_ui.Checkbox("First checkbox", 50, 150, false, (v) => {
67
+ console.log("Checkbox value: " + v);
68
+ });
70
69
 
71
- requestAnimationFrame(loop);
72
- }
70
+ im_ui.endFrame();
73
71
 
74
72
  requestAnimationFrame(loop);
73
+ }
74
+
75
+ requestAnimationFrame(loop);
76
+
77
+ </script>
75
78
 
76
- </script>
77
79
  </html>
package/examples/index.html CHANGED
@@ -2,15 +2,11 @@
2
2
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
3
  <head>
4
4
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
- <title>LexGUI Examples</title>
5
+ <title>Examples - LexGUI.js </title>
6
6
  <link rel="stylesheet" href="../build/lexgui.css">
7
7
  <link rel="icon" href="../images/icon.png">
8
8
  <style>
9
9
  iframe { border: none; }
10
- .lexexamplespanel {
11
- margin-left: 6px;
12
- margin-top: 6px;
13
- }
14
10
  </style>
15
11
  <script type="importmap">
16
12
  {
@@ -41,6 +37,7 @@
41
37
  });
42
38
 
43
39
  const examples = [
40
+ 'All Widgets',
44
41
  'Area Tabs',
45
42
  'Asset View',
46
43
  'Code Editor',
@@ -51,7 +48,7 @@
51
48
  "Timeline"
52
49
  ];
53
50
 
54
- let panel = leftArea.addPanel({ className: "lexexamplespanel" });
51
+ let panel = leftArea.addPanel();
55
52
  fillExamples( panel );
56
53
 
57
54
  let iframe = document.createElement('iframe');
@@ -70,7 +67,7 @@
70
67
  window.open("https://github.com/jxarco/lexgui.js/blob/master/examples/" + tokens[tokens.length - 1], '_blank')
71
68
  }
72
69
  }
73
- ], { float: "htc" } );
70
+ ], { float: "hbc" } );
74
71
 
75
72
  // **** **** **** **** **** **** **** **** **** **** **** ****
76
73
 
package/examples/node_graph.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
2
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+
3
4
  <head>
4
5
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
6
  <title>LexGUI Node Graph Demo</title>
@@ -14,56 +15,58 @@
14
15
  }
15
16
  </script>
16
17
  </head>
18
+
17
19
  <body></body>
18
- <script type="module">
20
+ <script type="module">
19
21
 
20
- import { LX } from 'lexgui';
21
- import 'lexgui/components/nodegraph.js';
22
+ import { LX } from 'lexgui';
23
+ import 'lexgui/components/nodegraph.js';
22
24
 
23
- // init library and get main area
24
- let area = LX.init();
25
+ // init library and get main area
26
+ let area = LX.init();
25
27
 
26
- // split main area
27
- var [topArea, bottomArea] = area.split({ type: 'vertical', sizes:["25%","75%"] });
28
+ // split main area
29
+ var [topArea, bottomArea] = area.split({ type: 'vertical', sizes: ["25%", "75%"] });
28
30
 
29
- // add canvas to topArea
30
- var canvas = document.createElement('canvas');
31
- canvas.id = "mycanvas";
32
- canvas.width = topArea.root.clientWidth;
33
- canvas.height = topArea.root.clientHeight;
34
- canvas.style.width = "100%";
35
- canvas.style.height = "100%";
36
- topArea.attach( canvas );
31
+ // add canvas to topArea
32
+ var canvas = document.createElement('canvas');
33
+ canvas.id = "mycanvas";
34
+ canvas.width = topArea.root.clientWidth;
35
+ canvas.height = topArea.root.clientHeight;
36
+ canvas.style.width = "100%";
37
+ canvas.style.height = "100%";
38
+ topArea.attach(canvas);
37
39
 
38
- // add on resize event to control canvas size
39
- topArea.onresize = function( bounding ) {
40
- canvas.width = bounding.width;
41
- canvas.height = bounding.height;
42
- };
40
+ // add on resize event to control canvas size
41
+ topArea.onresize = function (bounding) {
42
+ canvas.width = bounding.width;
43
+ canvas.height = bounding.height;
44
+ };
43
45
 
44
- let graph_editor = new LX.GraphEditor( bottomArea, {
45
-
46
- } );
46
+ let graph_editor = new LX.GraphEditor(bottomArea, {
47
47
 
48
- graph_editor.loadGraph( "../data/graph_sample.json" );
48
+ });
49
49
 
50
- function loop(dt) {
51
-
52
- var ctx = canvas.getContext("2d");
50
+ graph_editor.loadGraph("../data/graph_sample.json");
53
51
 
54
- ctx.fillStyle = "#b7a9b1";
55
- ctx.fillRect(0, 0, canvas.width, canvas.height);
52
+ function loop(dt) {
56
53
 
57
- ctx.font = "48px Monospace";
58
- ctx.fillStyle = "#ff1999";
54
+ var ctx = canvas.getContext("2d");
59
55
 
60
- const text = "Lexgui.js @jxarco";
61
- ctx.fillText(text, 100, 125);
56
+ ctx.fillStyle = "#b7a9b1";
57
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
62
58
 
63
- requestAnimationFrame(loop);
64
- }
59
+ ctx.font = "48px Monospace";
60
+ ctx.fillStyle = "#ff1999";
61
+
62
+ const text = "Lexgui.js @jxarco";
63
+ ctx.fillText(text, 100, 125);
65
64
 
66
65
  requestAnimationFrame(loop);
66
+ }
67
+
68
+ requestAnimationFrame(loop);
69
+
70
+ </script>
67
71
 
68
- </script>
69
72
  </html>