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.
- package/build/components/audio.js +7 -7
- package/build/components/timeline.js +3 -3
- package/build/lexgui.css +484 -552
- package/build/lexgui.js +396 -182
- package/build/lexgui.min.css +4 -3
- package/build/lexgui.min.js +1 -1
- package/build/lexgui.module.js +396 -182
- package/build/lexgui.module.min.js +1 -1
- package/build/utilities.css +314 -0
- package/changelog.md +30 -1
- package/demo.js +434 -49
- 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
|
@@ -33,6 +33,11 @@ class Knob extends LX.Widget {
|
|
|
33
33
|
LX.Widget._dispatchEvent( innerKnobCircle, "change", skipCallback );
|
|
34
34
|
};
|
|
35
35
|
|
|
36
|
+
this.onResize = ( rect ) => {
|
|
37
|
+
const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
|
|
38
|
+
container.style.width = `calc( 100% - ${ realNameWidth }px)`;
|
|
39
|
+
};
|
|
40
|
+
|
|
36
41
|
const snapEnabled = ( options.snap && options.snap.constructor == Number );
|
|
37
42
|
const ticks = [];
|
|
38
43
|
if( snapEnabled )
|
|
@@ -48,7 +53,6 @@ class Knob extends LX.Widget {
|
|
|
48
53
|
container.className = "lexknob";
|
|
49
54
|
container.addClass( options.size );
|
|
50
55
|
container.addClass( snapEnabled ? "show-ticks" : null );
|
|
51
|
-
container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
|
|
52
56
|
|
|
53
57
|
let knobCircle = document.createElement( 'div' );
|
|
54
58
|
knobCircle.className = "knobcircle";
|
|
@@ -181,14 +185,10 @@ class Knob extends LX.Widget {
|
|
|
181
185
|
}
|
|
182
186
|
|
|
183
187
|
container.appendChild( knobCircle );
|
|
188
|
+
|
|
184
189
|
this.root.appendChild( container );
|
|
185
190
|
|
|
186
|
-
|
|
187
|
-
if( !this.name )
|
|
188
|
-
{
|
|
189
|
-
this.root.className += " noname";
|
|
190
|
-
container.style.width = "100%";
|
|
191
|
-
}
|
|
191
|
+
LX.doAsync( this.onResize.bind( this ) );
|
|
192
192
|
}
|
|
193
193
|
}
|
|
194
194
|
|
|
@@ -101,7 +101,7 @@ class Timeline {
|
|
|
101
101
|
|
|
102
102
|
this.root = new LX.Area({className : 'lextimeline'});
|
|
103
103
|
|
|
104
|
-
this.header_offset =
|
|
104
|
+
this.header_offset = 48;
|
|
105
105
|
|
|
106
106
|
let width = options.width ? options.width : null;
|
|
107
107
|
let height = options.height ? options.height - this.header_offset : null;
|
|
@@ -176,7 +176,7 @@ class Timeline {
|
|
|
176
176
|
header.addTitle(this.name );
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
-
const buttonContainer = LX.makeContainer(["auto", "100%"], "
|
|
179
|
+
const buttonContainer = LX.makeContainer( ["auto", "100%"], "flex flex-row" );
|
|
180
180
|
|
|
181
181
|
header.queue( buttonContainer );
|
|
182
182
|
|
|
@@ -255,7 +255,7 @@ class Timeline {
|
|
|
255
255
|
}, { title: "Settings" })
|
|
256
256
|
}
|
|
257
257
|
|
|
258
|
-
header.endLine( "
|
|
258
|
+
header.endLine( "justify-around" );
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
/**
|