lexgui 0.1.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 (22) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +31 -0
  3. package/build/components/codeeditor.js +1865 -0
  4. package/build/components/nodegraph.js +534 -0
  5. package/build/components/timeline.js +4599 -0
  6. package/build/lexgui.css +2925 -0
  7. package/build/lexgui.js +7292 -0
  8. package/build/lexgui.module.js +7289 -0
  9. package/demo.js +778 -0
  10. package/examples/area_tabs.html +101 -0
  11. package/examples/asset_view.html +180 -0
  12. package/examples/code_editor.html +61 -0
  13. package/examples/dialogs.html +104 -0
  14. package/examples/index.html +84 -0
  15. package/examples/node_graph.html +59 -0
  16. package/examples/overlay_area.html +51 -0
  17. package/examples/previews/area_tabs.png +0 -0
  18. package/examples/previews/asset_view.png +0 -0
  19. package/examples/previews/code_editor.png +0 -0
  20. package/examples/previews/dialogs.png +0 -0
  21. package/examples/previews/overlay_area.png +0 -0
  22. package/package.json +37 -0
package/examples/area_tabs.html ADDED
@@ -0,0 +1,101 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
+ <title>LexGUI Area Tabs Demo</title>
6
+ <link rel="stylesheet" href="../build/lexgui.css">
7
+ </head>
8
+ <body></body>
9
+ <script src="../build/lexgui.js"></script>
10
+ <script>
11
+
12
+ // init library and get main area
13
+ let area = LX.init();
14
+
15
+ // split main area
16
+ var [leftArea, rightArea] = area.split({sizes:["75%","25%"]});
17
+
18
+ // Get new content area to fill it
19
+ const leftTabs = leftArea.addTabs();
20
+
21
+ // add canvas to left upper part
22
+ var canvas = document.createElement('canvas');
23
+ canvas.id = "mycanvas";
24
+ canvas.width = leftArea.root.clientWidth;
25
+ canvas.height = leftArea.root.clientHeight;
26
+ canvas.style.width = "100%";
27
+ canvas.style.height = "100%";
28
+ leftTabs.add( "Canvas", canvas );
29
+
30
+ // add on resize event to control canvas size
31
+ leftArea.onresize = function( bounding ) {
32
+ canvas.width = bounding.width;
33
+ canvas.height = bounding.height;
34
+ };
35
+
36
+ const rightTabs = rightArea.addTabs();
37
+
38
+ var panelA = new LX.Panel();
39
+ fillPanelA( panelA );
40
+ rightTabs.add( "PanelA", panelA );
41
+
42
+ var panelB = new LX.Panel();
43
+ fillPanelB( panelB );
44
+ rightTabs.add( "PanelB", panelB );
45
+
46
+ function loop(dt) {
47
+
48
+ var ctx = canvas.getContext("2d");
49
+
50
+ // Get values from panel widgets (e.g. color value)
51
+ ctx.fillStyle = panelA.getValue('Background');
52
+
53
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
54
+ ctx.font = panelA.getValue('Font Size') + "px Monospace";
55
+
56
+ ctx.fillStyle = panelA.getValue('Font Color');
57
+
58
+ const text = panelA.getValue('Text');
59
+ const pos2D = panelA.getValue('2D Position');
60
+ ctx.fillText(text, pos2D[0], pos2D[1]);
61
+
62
+ requestAnimationFrame(loop);
63
+ }
64
+
65
+ requestAnimationFrame(loop);
66
+
67
+ // **** **** **** **** **** **** **** **** **** **** **** ****
68
+
69
+ function fillPanelA( panel ) {
70
+
71
+ panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
72
+ panel.addColor("Background", "#b7a9b1");
73
+ panel.addText("Text", "Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
74
+ panel.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
75
+ console.log("Font Color: ", value);
76
+ });
77
+ panel.addNumber("Font Size", 36, (value, event) => {
78
+ console.log(value);
79
+ }, { min: 1, max: 48, step: 1});
80
+ panel.addVector2("2D Position", [250, 350], (value, event) => {
81
+ console.log(value);
82
+ }, { min: 0, max: 1024 });
83
+ panel.merge();
84
+ }
85
+
86
+ function fillPanelB( panel ) {
87
+
88
+ panel.branch("Settings", {icon: "fa-solid fa-palette", filter: true});
89
+ panel.addTitle("Configuration (Im a title)");
90
+ panel.addCheckbox("Toggle me", true, (value, event) => {
91
+ console.log(value);
92
+ }, { suboptions: (p) => {
93
+ p.addText(null, "Suboption 1");
94
+ p.addNumber("Suboption 2", 12);
95
+ } });
96
+ panel.addFile("Image", data => { console.log(data) }, {} );
97
+ panel.merge();
98
+ }
99
+
100
+ </script>
101
+ </html>
package/examples/asset_view.html ADDED
@@ -0,0 +1,180 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
+ <title>LexGUI AssetView Demo</title>
6
+ <link rel="stylesheet" href="../build/lexgui.css">
7
+ </head>
8
+ <body></body>
9
+ <script src="../build/lexgui.js"></script>
10
+ <script src="../build/components/codeeditor.js"></script>
11
+ <script>
12
+
13
+ // init library and get main area
14
+ let area = LX.init();
15
+
16
+ // split main area
17
+ var [topArea, bottomArea] = area.split({type: 'vertical', sizes:["60vh","40vh"]});
18
+ bottomArea.setLimitBox(0, 450);
19
+
20
+ // add canvas to topArea
21
+ var canvas = document.createElement('canvas');
22
+ canvas.id = "mycanvas";
23
+ canvas.width = topArea.root.clientWidth;
24
+ canvas.height = topArea.root.clientHeight;
25
+ canvas.style.width = "100%";
26
+ canvas.style.height = "100%";
27
+ topArea.attach( canvas );
28
+
29
+ // add on resize event to control canvas size
30
+ topArea.onresize = function( bounding ) {
31
+ canvas.width = bounding.width;
32
+ canvas.height = bounding.height;
33
+ };
34
+
35
+ let assetView = new LX.AssetView({
36
+ // skip_browser: true,
37
+ // skip_preview: true,
38
+ // root_path: "../"
39
+ });
40
+ bottomArea.attach( assetView );
41
+
42
+ let assetData = [
43
+ {
44
+ id: "dog.png",
45
+ type: "image",
46
+ src: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
47
+ },
48
+ {
49
+ id: "sigml_test.sigml",
50
+ type: "sigml",
51
+ src: "../data/sigml_test.sigml"
52
+ },
53
+ {
54
+ id: "test.json",
55
+ type: "JSON",
56
+ src: "../data/test.json"
57
+ },
58
+ {
59
+ id: "godot",
60
+ type: "folder",
61
+ children: [
62
+ {
63
+ id: "color.png",
64
+ type: "image",
65
+ src: "https://godotengine.org/assets/press/icon_color.png"
66
+ },
67
+ {
68
+ id: "monochrome_light.png",
69
+ type: "image",
70
+ src: "https://godotengine.org/assets/press/icon_monochrome_light.png"
71
+ },
72
+ {
73
+ id: "example.png",
74
+ type: "image",
75
+ src: "../data/godot_pixelart.png"
76
+ },
77
+ {
78
+ id: "vertical_color.png",
79
+ type: "image",
80
+ src: "https://godotengine.org/assets/press/logo_vertical_color_dark.png"
81
+ },
82
+ {
83
+ id: "doggies",
84
+ type: "folder",
85
+ children: [
86
+ {
87
+ id: "pepe.png",
88
+ type: "image",
89
+ src: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
90
+ }
91
+ ]
92
+ }
93
+ ]
94
+ },
95
+ {
96
+ id: "blacky.png",
97
+ type: "image",
98
+ src: "https://www.pngall.com/wp-content/uploads/5/Black-Dog-PNG.png"
99
+ },
100
+ {
101
+ id: "german.png",
102
+ type: "image",
103
+ src: "https://static.vecteezy.com/system/resources/previews/017/420/504/original/portrait-of-a-dog-png.png"
104
+ },
105
+ {
106
+ id: "unreal",
107
+ type: "folder",
108
+ children: [
109
+ {
110
+ id: "color.png",
111
+ type: "image",
112
+ src: "https://cdn.icon-icons.com/icons2/2389/PNG/512/unreal_engine_logo_icon_144771.png"
113
+ },
114
+ {
115
+ id: "demo.js",
116
+ type: "script",
117
+ src: "../data/script.js"
118
+ }
119
+ ]
120
+ },
121
+ {
122
+ id: "brow_lowerer.png",
123
+ type: "clip",
124
+ src: "../data/brow_lowerer.png"
125
+ }
126
+ ];
127
+
128
+ assetView.load( assetData, event => {
129
+ switch(event.type) {
130
+ case LX.AssetViewEvent.ASSET_SELECTED:
131
+ if(event.multiple)
132
+ console.log("Selected: ", event.item);
133
+ else
134
+ console.log(event.item.id + " selected");
135
+ break;
136
+ case LX.AssetViewEvent.ASSET_DBLCLICK:
137
+ console.log(event.item.id + " double clicked");
138
+ if( !event.item.src || event.item.type == "image" ) break;
139
+ if(window.dialog) window.dialog.destroy();
140
+ window.dialog = new LX.PocketDialog("Editor", p => {
141
+ const area = new LX.Area();
142
+ p.attach( area );
143
+ let editor = new LX.CodeEditor(area, {
144
+ allow_add_scripts: false
145
+ });
146
+ editor.loadFile( event.item.src );
147
+ }, { size: ["40%", "600px"], closable: true });
148
+ break;
149
+ case LX.AssetViewEvent.ASSET_DELETED:
150
+ console.log(event.item.id + " deleted");
151
+ break;
152
+ case LX.AssetViewEvent.ASSET_CLONED:
153
+ console.log(event.item.id + " cloned");
154
+ break;
155
+ case LX.AssetViewEvent.ASSET_RENAMED:
156
+ console.log(event.item.id + " is now called " + event.value);
157
+ break;
158
+ }
159
+ } );
160
+
161
+ function loop(dt) {
162
+
163
+ var ctx = canvas.getContext("2d");
164
+
165
+ ctx.fillStyle = "#b7a9b1";
166
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
167
+
168
+ ctx.font = "48px Monospace";
169
+ ctx.fillStyle = "#ff1999";
170
+
171
+ const text = "Lexgui.js @jxarco";
172
+ ctx.fillText(text, 300, 300);
173
+
174
+ requestAnimationFrame(loop);
175
+ }
176
+
177
+ requestAnimationFrame(loop);
178
+
179
+ </script>
180
+ </html>
package/examples/code_editor.html ADDED
@@ -0,0 +1,61 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
+ <title>LexGUI Code Editor Demo</title>
6
+ <link rel="stylesheet" href="../build/lexgui.css">
7
+ <script src="../build/lexgui.js"></script>
8
+ <script src="../build/components/codeeditor.js"></script>
9
+ </head>
10
+ <body></body>
11
+ <script>
12
+
13
+ // init library and get main area
14
+ let area = LX.init();
15
+
16
+ // split main area
17
+ var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
18
+
19
+ // add canvas to leftArea
20
+ var canvas = document.createElement('canvas');
21
+ canvas.id = "mycanvas";
22
+ canvas.width = leftArea.root.clientWidth;
23
+ canvas.height = leftArea.root.clientHeight;
24
+ canvas.style.width = "100%";
25
+ canvas.style.height = "100%";
26
+ leftArea.attach( canvas );
27
+
28
+ // add on resize event to control canvas size
29
+ leftArea.onresize = function( bounding ) {
30
+ canvas.width = bounding.width;
31
+ canvas.height = bounding.height;
32
+ };
33
+
34
+ let editor = new LX.CodeEditor(rightArea, {
35
+ // allow_add_scripts: false
36
+ });
37
+
38
+ editor.loadFile( "../data/test.json" );
39
+ editor.loadFile( "../data/style.css" );
40
+ editor.loadFile( "../data/script.js" );
41
+
42
+ function loop(dt) {
43
+
44
+ var ctx = canvas.getContext("2d");
45
+
46
+ ctx.fillStyle = "#b7a9b1";
47
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
48
+
49
+ ctx.font = "48px Monospace";
50
+ ctx.fillStyle = "#ff1999";
51
+
52
+ const text = "Lexgui.js @jxarco";
53
+ ctx.fillText(text, 300, 300);
54
+
55
+ requestAnimationFrame(loop);
56
+ }
57
+
58
+ requestAnimationFrame(loop);
59
+
60
+ </script>
61
+ </html>
package/examples/dialogs.html ADDED
@@ -0,0 +1,104 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
+ <title>LexGUI Dialogs Demo</title>
6
+ <link rel="stylesheet" href="../build/lexgui.css">
7
+ </head>
8
+ <body></body>
9
+ <script src="../build/lexgui.js"></script>
10
+ <script>
11
+
12
+ // Init library and get main area
13
+ let area = LX.init({ skip_default_area: true });
14
+
15
+ LX.popup("Hello! I'm a popup dialog :)", null, { position: ["45%", "20%"] })
16
+
17
+ const pocketDialog = new LX.PocketDialog("Load Settings", p => {
18
+
19
+ p.branch("Canvas");
20
+ p.addColor("Background", "#b7a9b1");
21
+ p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
22
+ p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
23
+ console.log("Font Color: ", value);
24
+ });
25
+ p.addNumber("Font Size", 36, (value, event) => {
26
+ console.log(value);
27
+ }, { min: 1, max: 48, step: 1});
28
+ p.addVector2("2D Position", [250, 350], (value, event) => {
29
+ console.log(value);
30
+ }, { min: 0, max: 1024 });
31
+
32
+ p.branch("Project");
33
+ p.addText("Name", "Lexgui.js");
34
+ p.addButton(null, "Export");
35
+ p.merge();
36
+ }, { float: 'lt' } );
37
+
38
+ const dialogClosable = new LX.Dialog("Closable Dialog", p => {
39
+
40
+ p.branch("Canvas");
41
+ p.addColor("Background", "#b7a9b1");
42
+ p.addText("Text", "Dialog Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
43
+ p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
44
+ console.log("Font Color: ", value);
45
+ });
46
+ p.addNumber("Font Size", 36, (value, event) => {
47
+ console.log(value);
48
+ }, { min: 1, max: 48, step: 1});
49
+ p.addVector2("2D Position", [250, 350], (value, event) => {
50
+ console.log(value);
51
+ }, { min: 0, max: 1024 });
52
+ p.merge();
53
+ }, { size: ["350px", null], closable: true });
54
+
55
+ const draggablePocketDialog = new LX.PocketDialog("Draggable PocketDialog", p => {
56
+
57
+ p.branch("Canvas");
58
+ p.addColor("Background", "#b7a9b1");
59
+ p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
60
+ p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
61
+ console.log("Font Color: ", value);
62
+ });
63
+ p.addNumber("Font Size", 36, (value, event) => {
64
+ console.log(value);
65
+ }, { min: 1, max: 48, step: 1});
66
+ p.addVector2("2D Position", [250, 350], (value, event) => {
67
+ console.log(value);
68
+ }, { min: 0, max: 1024 });
69
+ p.addDropdown("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) => {
70
+ console.log(value);
71
+ }, {filter: true});
72
+ p.merge();
73
+ }, { size: ["350px", null], draggable: true });
74
+
75
+ // add canvas to left upper part
76
+ var canvas = document.createElement('canvas');
77
+ canvas.id = "mycanvas";
78
+ canvas.width = window.innerWidth;
79
+ canvas.height = window.innerHeight
80
+ canvas.style.width = "100%";
81
+ canvas.style.height = "100%";
82
+ document.body.appendChild( canvas );
83
+
84
+ function loop(dt) {
85
+
86
+ var ctx = canvas.getContext("2d");
87
+
88
+ // Get values from panel widgets (e.g. color value)
89
+ ctx.fillStyle = pocketDialog.panel.getValue('Background');
90
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
91
+
92
+ ctx.font = pocketDialog.panel.getValue('Font Size') + "px Monospace";
93
+ ctx.fillStyle = pocketDialog.panel.getValue('Font Color');
94
+
95
+ const text = pocketDialog.panel.getValue('Text');
96
+ const pos2D = pocketDialog.panel.getValue('2D Position');
97
+ ctx.fillText(text, pos2D[0], pos2D[1]);
98
+
99
+ requestAnimationFrame(loop);
100
+ }
101
+
102
+ requestAnimationFrame(loop);
103
+ </script>
104
+ </html>
package/examples/index.html ADDED
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
+ <title>LexGUI Examples</title>
6
+ <link rel="stylesheet" href="../build/lexgui.css">
7
+ <style>
8
+ iframe { border: none; }
9
+ .lexexamplespanel {
10
+ margin-left: 6px;
11
+ margin-top: 6px;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body></body>
16
+ <script src="../build/lexgui.js"></script>
17
+ <script>
18
+
19
+ // Init library and get main area
20
+ let area = LX.init();
21
+
22
+ // Split main area
23
+ let [leftArea, rightArea] = area.split({ sizes: ["20%","80%"], resize: false });
24
+
25
+ leftArea.root.style.borderRight = "2px solid gray";
26
+ leftArea.addMenubar( m => {
27
+ m.add( "Examples", () => {
28
+ location.href = "../examples/";
29
+ });
30
+ m.add( "Docs v" + LX.version, (v, name) => {
31
+ location.href = "../docs/";
32
+ });
33
+ m.setButtonIcon("Github", "fa-brands fa-github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
34
+ });
35
+
36
+ const examples = [
37
+ 'Area Tabs',
38
+ 'Asset View',
39
+ 'Code Editor',
40
+ 'Overlay Area',
41
+ 'Dialogs',
42
+ ];
43
+
44
+ let panel = leftArea.addPanel({ className: "lexexamplespanel" });
45
+ fillExamples( panel );
46
+
47
+ let iframe = document.createElement('iframe');
48
+ iframe.id = iframe.name = 'viewer';
49
+ iframe.src = "area_tabs.html";
50
+ iframe.style.width = "100%";
51
+ iframe.style.height = "100%";
52
+ rightArea.root.appendChild(iframe);
53
+
54
+ rightArea.addOverlayButtons([
55
+ {
56
+ name: "View Source Code",
57
+ icon: "fa fa-code",
58
+ callback: (value, event) => {
59
+ const tokens = iframe.src.split('/');
60
+ window.open("https://github.com/jxarco/lexgui.js/blob/master/examples/" + tokens[tokens.length - 1], '_blank')
61
+ }
62
+ }
63
+ ], { float: "htc" } );
64
+
65
+ // **** **** **** **** **** **** **** **** **** **** **** ****
66
+
67
+ function fillExamples( panel ) {
68
+
69
+ panel.clear();
70
+
71
+ for( let ex of examples )
72
+ {
73
+ const id = ex.replace(" ", "_").toLowerCase();
74
+ const options = {
75
+ img: "previews/" + id + ".png",
76
+ callback: function() {
77
+ iframe.src = id + ".html";
78
+ }
79
+ };
80
+ panel.addCard(ex, options);
81
+ }
82
+ }
83
+ </script>
84
+ </html>
package/examples/node_graph.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
+ <title>LexGUI Node Graph Demo</title>
6
+ <link rel="stylesheet" href="../build/lexgui.css">
7
+ <script src="../build/lexgui.js"></script>
8
+ <script src="../build/components/nodegraph.js"></script>
9
+ </head>
10
+ <body></body>
11
+ <script>
12
+
13
+ // init library and get main area
14
+ let area = LX.init();
15
+
16
+ // split main area
17
+ var [topArea, bottomArea] = area.split({ type: 'vertical', sizes:["25%","75%"] });
18
+
19
+ // add canvas to topArea
20
+ var canvas = document.createElement('canvas');
21
+ canvas.id = "mycanvas";
22
+ canvas.width = topArea.root.clientWidth;
23
+ canvas.height = topArea.root.clientHeight;
24
+ canvas.style.width = "100%";
25
+ canvas.style.height = "100%";
26
+ topArea.attach( canvas );
27
+
28
+ // add on resize event to control canvas size
29
+ topArea.onresize = function( bounding ) {
30
+ canvas.width = bounding.width;
31
+ canvas.height = bounding.height;
32
+ };
33
+
34
+ let graph_canvas = new LX.GraphCanvas(bottomArea, {
35
+ // allow_add_scripts: false
36
+ });
37
+
38
+ graph_canvas.setGraph( new LX.Graph() );
39
+
40
+ function loop(dt) {
41
+
42
+ var ctx = canvas.getContext("2d");
43
+
44
+ ctx.fillStyle = "#b7a9b1";
45
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
46
+
47
+ ctx.font = "48px Monospace";
48
+ ctx.fillStyle = "#ff1999";
49
+
50
+ const text = "Lexgui.js @jxarco";
51
+ ctx.fillText(text, 100, 125);
52
+
53
+ requestAnimationFrame(loop);
54
+ }
55
+
56
+ requestAnimationFrame(loop);
57
+
58
+ </script>
59
+ </html>
package/examples/overlay_area.html ADDED
@@ -0,0 +1,51 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
+ <title>LexGUI Overlay Timeline Demo</title>
6
+ <link rel="stylesheet" href="../build/lexgui.css">
7
+ </head>
8
+ <body></body>
9
+ <script src="../build/lexgui.js"></script>
10
+ <script src="../build/components/timeline.js"></script>
11
+ <script>
12
+
13
+ // init library and get main area
14
+ let area = LX.init();
15
+
16
+ // add canvas
17
+ var canvas = document.createElement('canvas');
18
+ canvas.id = "mycanvas";
19
+ canvas.width = window.innerWidth;
20
+ canvas.height = window.innerHeight
21
+ canvas.style.width = "100%";
22
+ canvas.style.height = "100%";
23
+ area.attach( canvas );
24
+
25
+ let timeline = new LX.KeyFramesTimeline("kf-timeline", {opacity: 0.8});
26
+ // timeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
27
+ // timeline.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});
28
+ let timelinearea = new LX.Area({ height: 400, overlay:"bottom", resize: true});
29
+ timelinearea.attach(timeline.root);
30
+
31
+ timelinearea.onresize = (bounding) => {timeline.resize( [ bounding.width, bounding.height ] );}
32
+ area.attach(timelinearea)
33
+
34
+ timeline.draw(0);
35
+
36
+ function loop(dt) {
37
+
38
+ var ctx = canvas.getContext("2d");
39
+ ctx.fillStyle = "cyan";
40
+ ctx.fillRect(0,0,1000,800);
41
+ ctx.fillStyle = "black";
42
+ ctx.font = "bold 48px serif"
43
+ ctx.fillText("Overlay timeline area", 400, 400);
44
+ timeline.draw();
45
+
46
+ requestAnimationFrame(loop);
47
+ }
48
+
49
+ requestAnimationFrame(loop);
50
+ </script>
51
+ </html>
package/examples/previews/area_tabs.png ADDED
Binary file
package/examples/previews/asset_view.png ADDED
Binary file
package/examples/previews/dialogs.png ADDED
Binary file