lexgui 0.5.2 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/audio.js +7 -7
- package/build/components/timeline.js +2 -2
- package/build/lexgui.css +387 -519
- package/build/lexgui.js +141 -102
- package/build/lexgui.min.css +4 -3
- package/build/lexgui.min.js +1 -1
- package/build/lexgui.module.js +141 -102
- package/build/lexgui.module.min.js +1 -1
- package/build/utilities.css +215 -0
- package/changelog.md +15 -1
- package/demo.js +94 -39
- package/examples/all_widgets.html +368 -0
- package/examples/area_tabs.html +94 -86
- package/examples/asset_view.html +183 -180
- package/examples/code_editor.html +62 -61
- package/examples/dialogs.html +97 -94
- package/examples/immediate_ui.html +44 -42
- package/examples/index.html +4 -7
- package/examples/node_graph.html +39 -36
- package/examples/previews/all_widgets.png +0 -0
- package/examples/side_bar.html +93 -90
- package/examples/timeline.html +4 -4
- package/examples/video_editor.html +38 -35
- package/examples/video_editor2.html +84 -79
- package/package.json +1 -1
package/examples/side_bar.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 Area Tabs Demo</title>
|
|
@@ -14,99 +15,101 @@
|
|
|
14
15
|
}
|
|
15
16
|
</script>
|
|
16
17
|
</head>
|
|
17
|
-
<body></body>
|
|
18
|
-
<script type="module">
|
|
19
|
-
|
|
20
|
-
import { LX } from 'lexgui';
|
|
21
18
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
19
|
+
<body></body>
|
|
20
|
+
<script type="module">
|
|
21
|
+
|
|
22
|
+
import { LX } from 'lexgui';
|
|
23
|
+
|
|
24
|
+
// init library and get main area
|
|
25
|
+
let area = LX.init();
|
|
26
|
+
|
|
27
|
+
area.root.style.width = "100%";
|
|
28
|
+
area.root.style.height = "100%";
|
|
29
|
+
|
|
30
|
+
function hide(el) {
|
|
31
|
+
el.style.display = 'none';
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function show(el) {
|
|
35
|
+
el.style.display = 'block';
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const logParams = (entryName, value, event) => { console.log(entryName, value, event) };
|
|
39
|
+
const actionLogParams = (entryName, event) => { console.log("Action called!", entryName, event) };
|
|
40
|
+
|
|
41
|
+
window.sidebar = area.addSidebar(m => {
|
|
42
|
+
m.group("Projects", { icon: "fa fa-plus", callback: (groupName, event) => { console.log(groupName) } });
|
|
43
|
+
m.add("Getting Started", { icon: "fa fa-cube", callback: logParams });
|
|
44
|
+
m.add("Getting Started/Installation", { icon: "fa fa-cube", callback: logParams });
|
|
45
|
+
m.add("Getting Started/Project Structure", { icon: "fa fa-cube", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
|
|
46
|
+
m.add("Building Your Application", { icon: "fa fa-code", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
|
|
47
|
+
m.add("Search Blocks", { icon: "fa fa-search", callback: logParams });
|
|
48
|
+
m.add("Very loooooooooooooooooooooooong sun", { icon: "fa fa-sun", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
|
|
49
|
+
m.separator();
|
|
50
|
+
m.group("API Reference");
|
|
51
|
+
m.add("Components", { icon: "fa fa-cube", callback: logParams });
|
|
52
|
+
m.add("File Conventions", { icon: "fa fa-code", callback: logParams });
|
|
53
|
+
m.add("Functions", { icon: "fa fa-search", callback: logParams });
|
|
54
|
+
m.add("CLI", { icon: "fa fa-sun", callback: logParams });
|
|
55
|
+
m.separator();
|
|
56
|
+
m.group("Architecture");
|
|
57
|
+
m.add("Accessibility ", { icon: "fa fa-cube", callback: logParams });
|
|
58
|
+
m.add("Fast Refresh", { icon: "fa fa-code", callback: logParams });
|
|
59
|
+
m.add("Supported Browsers", { icon: "fa fa-search", callback: logParams });
|
|
60
|
+
m.separator();
|
|
61
|
+
m.add("Calendar ", { collapsable: 3 });
|
|
62
|
+
m.add("Personal ", { callback: logParams, type: "checkbox" });
|
|
63
|
+
m.add("Work", { callback: logParams, type: "checkbox", value: true });
|
|
64
|
+
m.add("Family", { callback: logParams, type: "checkbox" });
|
|
65
|
+
}, {
|
|
66
|
+
headerTitle: "jxarco",
|
|
67
|
+
headerSubtitle: "alexroco.30@gmail.com",
|
|
68
|
+
headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
|
|
69
|
+
footerTitle: "jxarco",
|
|
70
|
+
footerSubtitle: "alexroco.30@gmail.com",
|
|
71
|
+
footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
|
|
72
|
+
onHeaderPressed: (e) => { console.log("onHeaderPressed") },
|
|
73
|
+
onFooterPressed: (e) => { console.log("onFooterPressed") }
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// add canvas to left upper part
|
|
77
|
+
var canvas = document.createElement('canvas');
|
|
78
|
+
canvas.id = "mycanvas";
|
|
79
|
+
canvas.width = area.root.clientWidth;
|
|
80
|
+
canvas.height = area.root.clientHeight;
|
|
81
|
+
canvas.style.width = "100%";
|
|
82
|
+
canvas.style.height = "100%";
|
|
83
|
+
|
|
84
|
+
area = sidebar.siblingArea;
|
|
85
|
+
|
|
86
|
+
area.onresize = (bounding) => {
|
|
87
|
+
canvas.width = bounding.width;
|
|
88
|
+
canvas.height = bounding.height;
|
|
89
|
+
};;
|
|
90
|
+
|
|
91
|
+
area.attach(canvas);
|
|
92
|
+
|
|
93
|
+
function loop(dt) {
|
|
94
|
+
|
|
95
|
+
var ctx = canvas.getContext("2d");
|
|
96
|
+
|
|
97
|
+
ctx.fillStyle = "#b7a9b1";
|
|
98
|
+
|
|
99
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
100
|
+
ctx.font = "44px Monospace";
|
|
101
|
+
|
|
102
|
+
ctx.fillStyle = "#ff1999";
|
|
103
|
+
|
|
104
|
+
const text = "lexgui @jxarco";
|
|
105
|
+
const pos2D = [200, 200];
|
|
106
|
+
ctx.fillText(text, pos2D[0], pos2D[1]);
|
|
31
107
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
108
|
+
requestAnimationFrame(loop);
|
|
109
|
+
}
|
|
35
110
|
|
|
36
|
-
|
|
37
|
-
const actionLogParams = (entryName, event) => { console.log("Action called!", entryName, event) };
|
|
38
|
-
|
|
39
|
-
window.sidebar = area.addSidebar( m => {
|
|
40
|
-
m.group( "Projects", { icon: "fa fa-plus", callback: (groupName, event) => { console.log(groupName) }} );
|
|
41
|
-
m.add( "Getting Started", { icon: "fa fa-cube", callback: logParams } );
|
|
42
|
-
m.add( "Getting Started/Installation", { icon: "fa fa-cube", callback: logParams } );
|
|
43
|
-
m.add( "Getting Started/Project Structure", { icon: "fa fa-cube", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } } );
|
|
44
|
-
m.add( "Building Your Application", { icon: "fa fa-code", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } } );
|
|
45
|
-
m.add( "Search Blocks", { icon: "fa fa-search", callback: logParams } );
|
|
46
|
-
m.add( "Very loooooooooooooooooooooooong sun", { icon: "fa fa-sun",callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } } );
|
|
47
|
-
m.separator();
|
|
48
|
-
m.group( "API Reference" );
|
|
49
|
-
m.add( "Components", { icon: "fa fa-cube", callback: logParams } );
|
|
50
|
-
m.add( "File Conventions", { icon: "fa fa-code", callback: logParams } );
|
|
51
|
-
m.add( "Functions", { icon: "fa fa-search",callback: logParams } );
|
|
52
|
-
m.add( "CLI", { icon: "fa fa-sun",callback: logParams } );
|
|
53
|
-
m.separator();
|
|
54
|
-
m.group( "Architecture" );
|
|
55
|
-
m.add( "Accessibility ", { icon: "fa fa-cube", callback: logParams } );
|
|
56
|
-
m.add( "Fast Refresh", { icon: "fa fa-code", callback: logParams } );
|
|
57
|
-
m.add( "Supported Browsers", { icon: "fa fa-search",callback: logParams } );
|
|
58
|
-
m.separator();
|
|
59
|
-
m.add( "Calendar ", { collapsable: 3 } );
|
|
60
|
-
m.add( "Personal ", { callback: logParams, type: "checkbox" } );
|
|
61
|
-
m.add( "Work", { callback: logParams, type: "checkbox", value: true } );
|
|
62
|
-
m.add( "Family", { callback: logParams, type: "checkbox" } );
|
|
63
|
-
}, {
|
|
64
|
-
headerTitle: "jxarco",
|
|
65
|
-
headerSubtitle: "alexroco.30@gmail.com",
|
|
66
|
-
headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
|
|
67
|
-
footerTitle: "jxarco",
|
|
68
|
-
footerSubtitle: "alexroco.30@gmail.com",
|
|
69
|
-
footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
|
|
70
|
-
onHeaderPressed: (e) => { console.log( "onHeaderPressed" ) },
|
|
71
|
-
onFooterPressed: (e) => { console.log( "onFooterPressed" ) }
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
// add canvas to left upper part
|
|
75
|
-
var canvas = document.createElement('canvas');
|
|
76
|
-
canvas.id = "mycanvas";
|
|
77
|
-
canvas.width = area.root.clientWidth;
|
|
78
|
-
canvas.height = area.root.clientHeight;
|
|
79
|
-
canvas.style.width = "100%";
|
|
80
|
-
canvas.style.height = "100%";
|
|
81
|
-
|
|
82
|
-
area = sidebar.siblingArea;
|
|
83
|
-
|
|
84
|
-
area.onresize = ( bounding ) => {
|
|
85
|
-
canvas.width = bounding.width;
|
|
86
|
-
canvas.height = bounding.height;
|
|
87
|
-
};;
|
|
88
|
-
|
|
89
|
-
area.attach( canvas );
|
|
90
|
-
|
|
91
|
-
function loop(dt) {
|
|
92
|
-
|
|
93
|
-
var ctx = canvas.getContext("2d");
|
|
94
|
-
|
|
95
|
-
ctx.fillStyle = "#b7a9b1";
|
|
96
|
-
|
|
97
|
-
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
98
|
-
ctx.font = "44px Monospace";
|
|
99
|
-
|
|
100
|
-
ctx.fillStyle = "#ff1999";
|
|
101
|
-
|
|
102
|
-
const text = "lexgui @jxarco";
|
|
103
|
-
const pos2D = [200, 200];
|
|
104
|
-
ctx.fillText(text, pos2D[0], pos2D[1]);
|
|
105
|
-
|
|
106
|
-
requestAnimationFrame(loop);
|
|
107
|
-
}
|
|
111
|
+
requestAnimationFrame(loop);
|
|
108
112
|
|
|
109
|
-
|
|
113
|
+
</script>
|
|
110
114
|
|
|
111
|
-
</script>
|
|
112
115
|
</html>
|
package/examples/timeline.html
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
fillPanel( panel );
|
|
55
55
|
|
|
56
56
|
let activeTimeline = null
|
|
57
|
-
|
|
57
|
+
createKeyframeTimeline( bottomTabs );
|
|
58
58
|
createClipsTimeline( bottomTabs );
|
|
59
59
|
createCurvesTimeline( bottomTabs );
|
|
60
60
|
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
panel.merge();
|
|
174
174
|
}
|
|
175
175
|
|
|
176
|
-
function
|
|
176
|
+
function createKeyframeTimeline( bottomTabs ) {
|
|
177
177
|
|
|
178
178
|
let keyframesPanel = new LX.Panel();
|
|
179
179
|
bottomTabs.add( "Keyframes", keyframesPanel, {onSelect: () => {
|
|
@@ -191,8 +191,8 @@
|
|
|
191
191
|
panel.addSelect("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
|
|
192
192
|
},
|
|
193
193
|
onAfterCreateTopBar: (panel) => {
|
|
194
|
-
panel.addButton("", "autoKeyEnable", null, { icon: 'fa fa-wand-magic-sparkles',
|
|
195
|
-
panel.addButton("", "unselectAll", (value, event) => { kfTimeline.unSelectAllKeyFrames();}, { icon: 'fa-regular fa-rectangle-xmark',
|
|
194
|
+
panel.addButton("autoKeyEnabled", "autoKeyEnable", null, { icon: 'fa fa-wand-magic-sparkles', hideName: true });
|
|
195
|
+
panel.addButton("unselectAll", "unselectAll", (value, event) => { kfTimeline.unSelectAllKeyFrames();}, { icon: 'fa-regular fa-rectangle-xmark', hideName: true, callback: (value, event) => { kfTimeline.unSelectAllKeyFrames();} });
|
|
196
196
|
}
|
|
197
197
|
});
|
|
198
198
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
<!DOCTYPE html
|
|
1
|
+
<!DOCTYPE html "-//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 Video Editor Demo</title>
|
|
@@ -14,39 +15,41 @@
|
|
|
14
15
|
}
|
|
15
16
|
</script>
|
|
16
17
|
</head>
|
|
18
|
+
|
|
17
19
|
<body></body>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
20
|
+
<script type="module">
|
|
21
|
+
|
|
22
|
+
import { LX } from 'lexgui';
|
|
23
|
+
import { VideoEditor } from 'lexgui/components/videoeditor.js';
|
|
24
|
+
// init library and get main area
|
|
25
|
+
let area = LX.init();
|
|
26
|
+
|
|
27
|
+
// split main area
|
|
28
|
+
let [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"], minimizable: true });
|
|
29
|
+
area.extend();
|
|
30
|
+
|
|
31
|
+
const videoArea = new LX.Area({ id: 'video-area' });
|
|
32
|
+
const video = document.createElement('video');
|
|
33
|
+
video.src = "../data/video.mp4";
|
|
34
|
+
videoArea.attach(video);
|
|
35
|
+
|
|
36
|
+
const videoEditor = new LX.VideoEditor(leftArea, { videoArea, video, crop: true })
|
|
37
|
+
|
|
38
|
+
const canvas = document.createElement('canvas');
|
|
39
|
+
canvas.width = video.clientWidth;
|
|
40
|
+
canvas.height = video.clientHeight;
|
|
41
|
+
const ctx = canvas.getContext("2d");
|
|
42
|
+
ctx.fillStyle = LX.getThemeColor("global-selected-light");
|
|
43
|
+
ctx.font = "40px Arial";
|
|
44
|
+
ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
|
|
45
|
+
|
|
46
|
+
canvas.style.position = "absolute";
|
|
47
|
+
canvas.style.left = "0";
|
|
48
|
+
videoArea.attach(canvas);
|
|
49
|
+
|
|
50
|
+
let panel = new LX.Panel();
|
|
51
|
+
panel = rightArea.addPanel(panel);
|
|
52
|
+
|
|
53
|
+
</script>
|
|
54
|
+
|
|
52
55
|
</html>
|
|
@@ -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 Video Editor Demo</title>
|
|
@@ -14,105 +15,109 @@
|
|
|
14
15
|
}
|
|
15
16
|
</script>
|
|
16
17
|
</head>
|
|
18
|
+
|
|
17
19
|
<body></body>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
m.setButtonImage("Page", "../data/godot_pixelart.png", null, {float: "left"});
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
20
|
+
<script type="module">
|
|
21
|
+
|
|
22
|
+
import { LX } from 'lexgui';
|
|
23
|
+
import { VideoEditor } from 'lexgui/components/videoeditor.js';
|
|
24
|
+
|
|
25
|
+
// Init library and get main area
|
|
26
|
+
let area = LX.init();
|
|
27
|
+
const menubar = area.addMenubar(m => {
|
|
28
|
+
m.setButtonImage("Page", "../data/godot_pixelart.png", null, { float: "left" });
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
// Split main area
|
|
32
|
+
let [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"], minimizable: true });
|
|
33
|
+
let [topArea, bottomArea] = leftArea.split({ sizes: ["90%", null], minimizable: false, resize: false, type: "vertical" });
|
|
34
|
+
area.extend();
|
|
35
|
+
|
|
36
|
+
/* Create video area with a menubar */
|
|
37
|
+
const videoArea = new LX.Area({ id: 'video-area' });
|
|
38
|
+
|
|
39
|
+
/* Add video editor with the video into the area*/
|
|
40
|
+
const video = document.createElement('video');
|
|
41
|
+
video.src = "../data/video.mp4";
|
|
42
|
+
videoArea.attach(video);
|
|
43
|
+
const videoEditor = new LX.VideoEditor(topArea, { videoArea, video })
|
|
44
|
+
|
|
45
|
+
/* Add canvas above video */
|
|
46
|
+
const canvas = document.createElement('canvas');
|
|
47
|
+
canvas.width = video.clientWidth;
|
|
48
|
+
canvas.height = video.clientHeight;
|
|
49
|
+
const ctx = canvas.getContext("2d");
|
|
50
|
+
ctx.fillStyle = LX.getThemeColor("global-selected-light");
|
|
51
|
+
ctx.font = "40px Arial";
|
|
52
|
+
ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
|
|
53
|
+
|
|
54
|
+
canvas.style.position = "absolute";
|
|
55
|
+
canvas.style.left = "0";
|
|
56
|
+
videoArea.attach(canvas);
|
|
57
|
+
leftArea.onresize = (size) => {
|
|
58
|
+
|
|
57
59
|
canvas.width = video.clientWidth;
|
|
58
60
|
canvas.height = video.clientHeight;
|
|
59
61
|
const ctx = canvas.getContext("2d");
|
|
60
62
|
ctx.fillStyle = LX.getThemeColor("global-selected-light");
|
|
61
63
|
ctx.font = "40px Arial";
|
|
62
|
-
ctx.fillText("I'm a canvas above the video!", canvas.width/2, 100);
|
|
64
|
+
ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
|
|
63
65
|
//videoEditor.timebar.resize(size)
|
|
64
|
-
|
|
66
|
+
}
|
|
65
67
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
/* Add show/hide right panel button*/
|
|
69
|
+
videoArea.addOverlayButtons([{
|
|
68
70
|
selectable: true,
|
|
69
71
|
selected: true,
|
|
70
72
|
icon: "fa-solid fa-info",
|
|
71
73
|
name: "Properties",
|
|
72
74
|
callback: (v, e) => {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
75
|
+
if (area.split_extended) {
|
|
76
|
+
area.reduce();
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
area.extend();
|
|
80
|
+
}
|
|
79
81
|
}
|
|
80
|
-
|
|
82
|
+
}], { float: 'tvr' });
|
|
81
83
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
+
let p = bottomArea.addPanel({ width: "100%", height: "100%", style: { display: "flex", "flex-direction": "row", "justify-content": "center", "align-content": "flex-start", "flex-wrap": "wrap" } });
|
|
85
|
+
p.addButton(null, "Trim", (v) => {
|
|
84
86
|
console.log(videoEditor.getTrimedTimes())
|
|
85
|
-
|
|
87
|
+
|
|
86
88
|
videoArea.sections[1].root.resize(["20%", "20%"])
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
let inspector = options.inspector || new LX.Panel({id:"blendshapes-inspector"});
|
|
100
|
-
|
|
101
|
-
if(options.clear) {
|
|
102
|
-
|
|
89
|
+
}, { width: "100px" })
|
|
90
|
+
p.addButton(null, null, (v) => { }, { width: "40px", icon: "fa-solid fa-rotate-left" })
|
|
91
|
+
|
|
92
|
+
/* Create right panel */
|
|
93
|
+
let panel = new LX.Panel({ id: "Properties" });
|
|
94
|
+
panel = rightArea.addPanel({ id: "Properties" });
|
|
95
|
+
createBlendShapesInspector({ "Name 1": 0, "Name 2": 0, "Name 3": 0.5, "Name 4": 0, "Name 5": 1, },
|
|
96
|
+
{ inspector: panel });
|
|
97
|
+
|
|
98
|
+
/* Functions */
|
|
99
|
+
function createBlendShapesInspector(bsNames, options = {}) {
|
|
100
|
+
|
|
101
|
+
let inspector = options.inspector || new LX.Panel({ id: "blendshapes-inspector" });
|
|
102
|
+
|
|
103
|
+
if (options.clear) {
|
|
104
|
+
inspector.clear();
|
|
103
105
|
}
|
|
104
|
-
|
|
105
|
-
if(inspector.root.id) {
|
|
106
|
-
|
|
106
|
+
|
|
107
|
+
if (inspector.root.id) {
|
|
108
|
+
inspector.addTitle(inspector.root.id);
|
|
107
109
|
}
|
|
108
110
|
|
|
109
|
-
for(let name in bsNames) {
|
|
110
|
-
inspector.addProgress(name, bsNames[name], {
|
|
111
|
-
|
|
112
|
-
|
|
111
|
+
for (let name in bsNames) {
|
|
112
|
+
inspector.addProgress(name, bsNames[name], {
|
|
113
|
+
min: 0, max: 1, low: 0.3, optimum: 1, high: 0.6, editable: options.editable, showNumber: options.showNumber,
|
|
114
|
+
callback: (v, e) => { },
|
|
115
|
+
signal: "@on_change_au_" + name
|
|
116
|
+
});
|
|
113
117
|
}
|
|
114
|
-
|
|
118
|
+
|
|
115
119
|
return inspector;
|
|
116
|
-
|
|
117
|
-
|
|
120
|
+
}
|
|
121
|
+
</script>
|
|
122
|
+
|
|
118
123
|
</html>
|