lexgui 0.1.35 → 0.1.37

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 (11) hide show
  1. package/README.md +75 -16
  2. package/build/components/audio.js +179 -0
  3. package/build/components/timeline.js +2761 -3119
  4. package/build/components/videoeditor.js +10 -2
  5. package/build/lexgui.css +93 -9
  6. package/build/lexgui.js +384 -225
  7. package/build/lexgui.module.js +367 -220
  8. package/changelog.md +22 -1
  9. package/demo.js +14 -7
  10. package/examples/timeline.html +33 -21
  11. package/package.json +1 -1
package/README.md CHANGED
@@ -1,16 +1,82 @@
1
1
  # lexgui.js
2
2
 
3
- **lexgui.js** is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. This library provides an easy-to-use API for building dynamic and interactive user interfaces without the need for complex frameworks or libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.
3
+ **lexgui.js** is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. It provides an easy-to-use API for building dynamic and interactive common and complex editor interfaces without the need for tedious frameworks or big libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.
4
4
 
5
- <img src="data/Screenshot.png" alt="Screenshot" style="width: 100%"/>
6
- <img src="data/Screenshot_Godot.png"/>
5
+ <table>
6
+ <tr>
7
+ <td valign="top"><img src="data/Screenshot.png"/></td>
8
+ <td valign="top"><img src="data/Screenshot_Godot.png"/></td>
9
+ </tr>
10
+ </table>
11
+
12
+ <table>
13
+ <tr>
14
+ <td valign="top"><h3>Code Editor</h3><img src="data/Screenshot_Code.png"/></td>
15
+ <td valign="top"><h3>Node Graph Editor (WIP)</h3><img src="data/Screenshot_Graph.png"/></td>
16
+ </tr>
17
+ </table>
18
+
19
+ ## Component Features
20
+
21
+ - [x] Asset Browser
22
+ - [x] Timeline
23
+ - [x] Code Editor
24
+ - [ ] Node Graphs (WIP)
25
+
26
+ ## Quick start
7
27
 
8
- ### Code Editor
9
- <img src="data/Screenshot_Code.png"/>
28
+ `index.html`:
29
+
30
+ ```html
31
+ <!DOCTYPE html>
32
+ <html lang="en">
33
+ <head>
34
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
35
+ <title>My first lexgui.js app</title>
36
+ <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^<version>/build/lexgui.css">
37
+ <script type="importmap">
38
+ {
39
+ "imports": {
40
+ "lexgui": "https://cdn.skypack.dev/lexgui@^<version>/build/lexgui.module.js",
41
+ "lexgui/components/": "https://cdn.skypack.dev/lexgui@^<version>/build/components/"
42
+ }
43
+ }
44
+ </script>
45
+ </head>
46
+ <body>
47
+ <script type="module" src="my_app.js"></script>
48
+ <body>
49
+ </html>
50
+ ```
51
+
52
+ `my_app.js`:
53
+
54
+ ```js
55
+ import { LX } from 'lexgui';
56
+
57
+ // Using components
58
+ import { CodeEditor } from 'lexgui/components/codeeditor.js';
59
+
60
+ // Create main area
61
+ let area = LX.init();
62
+
63
+ // Create area panels
64
+ let panel = area.addPanel();
65
+
66
+ // Start branch/section
67
+ panel.branch("Section Title");
68
+
69
+ // Add some widgets
70
+ panel.addButton(null, "Click me, Im Full Width...");
71
+ panel.addText("Text", "Warning text", null, { warning: true });
72
+
73
+ // Close section
74
+ panel.merge();
75
+ ```
10
76
 
11
77
  ## Docs
12
78
 
13
- The library documentation is in progress but you can check it [here](https://jxarco.github.io/lexgui.js/docs/).
79
+ The library documentation is available at [lexgui.js/docs/](https://jxarco.github.io/lexgui.js/docs/).
14
80
 
15
81
  ## Examples
16
82
 
@@ -20,8 +86,8 @@ Look at this [examples](https://jxarco.github.io/lexgui.js/examples/) to see how
20
86
 
21
87
  <table>
22
88
  <tr>
23
- <td valign="top"><h3>Animics (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/SignON-editor">github.com/upf-gti/SignON-editor</a><br><br><img src="data/scriptAnimation_signon.png" alt="scriptAnimation_signon"/></td>
24
- <td valign="top"><h3>Performs (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/SignON-realizer">github.com/upf-gti/SignON-realizer</a><br><br><img src="data/realizer_signon.png" alt="scriptAnimation_signon"/></td>
89
+ <td valign="top"><h3>Animics (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/animics">github.com/upf-gti/animics</a><br><br><img src="data/scriptAnimation_signon.png" alt="scriptAnimation_signon"/></td>
90
+ <td valign="top"><h3>Performs (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/performs">github.com/upf-gti/performs</a><br><br><img src="data/realizer_signon.png" alt="scriptAnimation_signon"/></td>
25
91
  </tr>
26
92
  </table>
27
93
 
@@ -32,11 +98,4 @@ Look at this [examples](https://jxarco.github.io/lexgui.js/examples/) to see how
32
98
 
33
99
  ## Feedback/Issues
34
100
 
35
- You can use the [repository issues section](https://github.com/jxarco/lexgui.js/issues) or simply write any feedback to alexroco.30@gmail.com.
36
-
37
- ## Component Features
38
-
39
- - [x] Asset Browser
40
- - [x] Timeline
41
- - [x] Code Editor
42
- - [ ] Node Graphs (WIP)
101
+ You can use the [repository issues section](https://github.com/jxarco/lexgui.js/issues) or simply write any feedback to alexroco.30@gmail.com.
package/build/components/audio.js ADDED
@@ -0,0 +1,179 @@
1
+ import { LX } from 'lexgui';
2
+
3
+ if(!LX) {
4
+ throw("lexgui.js missing!");
5
+ }
6
+
7
+ LX.components.push( 'Audio' );
8
+
9
+ function remapRange(oldValue, oldMin, oldMax, newMin, newMax)
10
+ {
11
+ return (((oldValue - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin;
12
+ }
13
+
14
+ /**
15
+ * @method addKnob
16
+ * @param {String} name Widget name
17
+ * @param {Number} value Knob value
18
+ * @param {Number} min Min Knob value
19
+ * @param {Number} max Max Knob value
20
+ * @param {Function} callback Callback function on change
21
+ * @param {*} options:
22
+ * minLabel (String): Label to show as min value
23
+ * maxLabel (String): Label to show as max value
24
+ */
25
+
26
+ let Panel = LX.Panel;
27
+ let Widget = LX.Widget;
28
+
29
+ Panel.prototype.addKnob = function( name, value, min, max, callback, options = {} ) {
30
+
31
+ let widget = this.create_widget( name, Widget.KNOB, options );
32
+
33
+ widget.onGetValue = () => {
34
+ return innerKnobCircle.value;
35
+ };
36
+ widget.onSetValue = ( newValue, skipCallback ) => {
37
+ innerSetValue( newValue );
38
+ Panel._dispatch_event( innerKnobCircle, "change", skipCallback );
39
+ };
40
+
41
+ let element = widget.domEl;
42
+
43
+ // Add reset functionality
44
+ if( widget.name ) {
45
+ Panel._add_reset_property( element.domName, function() {
46
+ this.style.display = "none";
47
+ innerSetValue( innerKnobCircle.iValue );
48
+ Panel._dispatch_event( innerKnobCircle, "change" );
49
+ });
50
+ }
51
+
52
+ var container = document.createElement( 'div' );
53
+ container.className = "lexknob " + ( options.size ?? '' );
54
+ container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
55
+
56
+ let knobCircle = document.createElement( 'div' );
57
+ knobCircle.className = "knobcircle";
58
+
59
+ let innerKnobCircle = document.createElement( 'div' );
60
+ innerKnobCircle.className = "innerknobcircle";
61
+ innerKnobCircle.min = min;
62
+ innerKnobCircle.max = max;
63
+ knobCircle.appendChild( innerKnobCircle );
64
+
65
+ let knobMarker = document.createElement( 'div' );
66
+ knobMarker.className = "knobmarker";
67
+ innerKnobCircle.appendChild( knobMarker );
68
+
69
+ if( value.constructor == Number )
70
+ {
71
+ value = LX.clamp( value, min, max );
72
+ value = options.precision ? LX.round( value, options.precision ) : value;
73
+ }
74
+
75
+ innerKnobCircle.value = innerKnobCircle.iValue = value;
76
+
77
+ let innerSetValue = function( v ) {
78
+ // Convert val between (-135 and 135)
79
+ const angle = remapRange( v, innerKnobCircle.min, innerKnobCircle.max, -135.0, 135.0 );
80
+ innerKnobCircle.style.rotate = angle + 'deg';
81
+ innerKnobCircle.value = v;
82
+ }
83
+
84
+ const angle = remapRange( value, min, max, -135.0, 135.0 );
85
+ innerKnobCircle.style.rotate = angle + 'deg';
86
+
87
+ if( options.disabled )
88
+ {
89
+ // vecinput.disabled = true;
90
+ }
91
+
92
+ // Add wheel input
93
+
94
+ innerKnobCircle.addEventListener( "wheel", function( e ) {
95
+ e.preventDefault();
96
+ if( this !== document.activeElement )
97
+ return;
98
+ let mult = options.step ?? 1;
99
+ if( e.shiftKey ) mult *= 10;
100
+ else if( e.altKey ) mult *= 0.1;
101
+ let new_value = ( this.value - mult * ( e.deltaY > 0 ? 1 : -1 ) );
102
+ this.value = new_value;// .toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
103
+ Panel._dispatch_event( innerKnobCircle, "change" );
104
+ }, { passive: false });
105
+
106
+ innerKnobCircle.addEventListener( "change", e => {
107
+
108
+ const knob = e.target;
109
+
110
+ const skipCallback = e.detail;
111
+
112
+ let val = knob.value = LX.clamp( knob.value, knob.min, knob.max );
113
+ val = options.precision ? LX.round( val, options.precision ) : val;
114
+
115
+ innerSetValue( val );
116
+
117
+ // Reset button (default value)
118
+ if( !skipCallback )
119
+ {
120
+ let btn = element.querySelector( ".lexwidgetname .lexicon" );
121
+ if( btn ) btn.style.display = val != innerKnobCircle.iValue ? "block": "none";
122
+ }
123
+
124
+ if( !skipCallback ) this._trigger( new LX.IEvent( name, val, e ), callback );
125
+ }, { passive: false });
126
+
127
+ // Add drag input
128
+
129
+ innerKnobCircle.addEventListener( "mousedown", inner_mousedown );
130
+
131
+ var that = this;
132
+ var lastY = 0;
133
+ function inner_mousedown( e ) {
134
+ if( document.activeElement == innerKnobCircle ) return;
135
+ var doc = that.root.ownerDocument;
136
+ doc.addEventListener("mousemove",inner_mousemove);
137
+ doc.addEventListener("mouseup",inner_mouseup);
138
+ lastY = e.pageY;
139
+ document.body.classList.add('nocursor');
140
+ document.body.classList.add('noevents');
141
+ e.stopImmediatePropagation();
142
+ e.stopPropagation();
143
+ }
144
+
145
+ function inner_mousemove( e ) {
146
+ if (lastY != e.pageY) {
147
+ let dt = lastY - e.pageY;
148
+ let mult = options.step ?? 1;
149
+ if(e.shiftKey) mult *= 10;
150
+ else if(e.altKey) mult *= 0.1;
151
+ let new_value = (innerKnobCircle.value - mult * dt);
152
+ innerKnobCircle.value = new_value;//.toFixed( 4 ).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
153
+ Panel._dispatch_event( innerKnobCircle, 'change' );
154
+ }
155
+
156
+ lastY = e.pageY;
157
+ e.stopPropagation();
158
+ e.preventDefault();
159
+ }
160
+
161
+ function inner_mouseup( e ) {
162
+ var doc = that.root.ownerDocument;
163
+ doc.removeEventListener( 'mousemove', inner_mousemove );
164
+ doc.removeEventListener( 'mouseup', inner_mouseup );
165
+ document.body.classList.remove( 'nocursor' );
166
+ document.body.classList.remove( 'noevents' );
167
+ }
168
+
169
+ container.appendChild( knobCircle );
170
+ element.appendChild( container );
171
+
172
+ // Remove branch padding and margins
173
+ if( !widget.name ) {
174
+ element.className += " noname";
175
+ container.style.width = "100%";
176
+ }
177
+
178
+ return widget;
179
+ }