lexgui 0.7.8 → 0.7.10

package/changelog.md

@@ -2,7 +2,49 @@
 
 ## dev
 
-## 0.7.8 (master)
+## 0.7.10 (master)
+
+Removed Fit-Tabs thumb CSS transition on `Tabs.add`.
+Added Popover documentation.
+Fixed `LX.codeSnippet` linesAdded/Removed options.
+Fixed `Area.extend()` and `Area.reduce()` transitions.
+
+AssetView:
+- Added support for video elements.
+- Fixed support for images using url with params.
+- Added more supported image extensions.
+- Updated documentation.
+
+CodeEditor:
+- Added support to `options.callback` to call when the editor is completely loaded.
+- Docs updated.
+
+Timeline:
+- Added `Timeline.setKeyframeSize` and `Timeline.setTrackHeight`.
+- Curve keyframes are visually clamped to the tracks' boundaries.
+- Fixed `Add Keyframe` option in context menu.
+
+VideoEditor:
+- Minor functions refactor.
+- Speed and loop buttons added to video controls.
+- Fixed resize controls area bug.
+
+## 0.7.9
+
+Allow wheel/middle click in menubar buttons.
+Pass RadioGroup name as argument to radio option callback.
+
+CodeEditor:
+- Fixed remove old selections on Select All.
+- Fixed Find next occurrence cursors (ctrl+D).
+- Added `CodeEditor.setCustomSuggestions(Array)`.
+
+VideoEditor:
+- Time marker ball improved to be showed above trim markers.
+- Force to load all chunks of the video.
+- Loop video manually done to fix sync.
+
+## 0.7.8
 
 Renamed AssetView "List" view to "Compact". Added better "List" view option.
 Fixed undesired scroll in AssetView.

package/examples/area-tabs.html

@@ -26,7 +26,7 @@
     let area = await LX.init();
 
     // split main area
-    var [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"] });
+    var [ leftArea, rightArea ] = area.split({ sizes: ["75%", "25%"], minimizable: true });
 
     // Get new content area to fill it
     const leftTabs = leftArea.addTabs();

package/examples/asset-view.html

@@ -56,7 +56,33 @@
         {
             id: "dog.png",
             type: "image",
-            path: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
+            src: "https://pngfre.com/wp-content/uploads/1653714420512-1-904x1024.png"
+        },
+        {
+            id: "greenland_grid_velo.bmp",
+            type: "image",
+            src: "https://people.math.sc.edu/Burkardt/data/bmp/greenland_grid_velo.bmp"
+        },
+        {
+            id: "Fox Monochrome.avif",
+            type: "image",
+            src: "https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/fox.profile0.10bpc.yuv420.monochrome.avif"
+        },
+        {
+            id: "Avatar",
+            type: "Avatar",
+            preview: "https://models.readyplayer.me/66e30a18eca8fb70dcadde68.png?background=68,68,245"
+        },
+        {
+            id: "video-test",
+            type: "video",
+            preview: "https://godotengine.org/assets/press/logo_vertical_color_dark.png",
+            src: "https://catsl.eelvex.net/static/vid/teacher-video-Ψ.mp4"
+        },
+        {
+            id: "nyan-pyportal.gif",
+            type: "image",
+            src: "../data/nyan-pyportal.gif"
         },
         {
             id: "sigml_test.sigml",

package/examples/timeline.html

@@ -48,15 +48,17 @@
         const types = { KEYFRAMES: 0, CLIPS: 1, CURVES: 2};
         let position = [250, 350];
         let trackName = "";
+        let kfTimeline = null;
 
         let panel = new LX.Panel();
         panel = rightArea.addPanel(panel);        
-        fillPanel( panel );
-
+        
         let activeTimeline = null
         createKeyframeTimeline( bottomTabs );
         createClipsTimeline( bottomTabs );
         createCurvesTimeline( bottomTabs );
+        
+        fillPanel( panel );
 
         LX.doAsync( activeTimeline.resize.bind( activeTimeline ) );
 
@@ -144,8 +146,17 @@
                     track.edited[keyframe] = true;
                 }
             }, { min: 0, max: 1024 });
-            panel.branch_open = true;
             panel.merge();
+
+            panel.addRange("Keyframe Size", kfTimeline.keyframeSize / kfTimeline.trackHeight, (v,e)=>{
+                kfTimeline.keyframeSize = v * kfTimeline.trackHeight;
+            }, { step: 0.001, min: 0, max: 1 });
+
+            panel.addNumber("Track Height", kfTimeline.trackHeight, (v,e)=>{
+                let ratio = kfTimeline.keyframeSize / kfTimeline.trackHeight;
+                kfTimeline.setTrackHeight(v);
+                kfTimeline.setKeyframeSize( kfTimeline.trackHeight * ratio, kfTimeline.trackHeight * ratio + 6 );
+            }, { step: 1, min: parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.25 });
         }
 
 
@@ -206,7 +217,7 @@
             keyframesPanel.onresize = () => {
                 kfTimeline.resize();
             }
-            let kfTimeline = new LX.KeyFramesTimeline('Keyframes Timeline', {
+            kfTimeline = new LX.KeyFramesTimeline('Keyframes Timeline', {
                 disableNewTracks: true,
                 onCreateBeforeTopBar: (panel) => {
                     panel.addSelect("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
@@ -224,25 +235,24 @@
             kfTimeline.show();
             
             
-            kfTimeline.onSelectKeyFrame = (data, currentSelection) => {
-                if(data.multipleSelection) {
+            kfTimeline.onSelectKeyFrame = (currentSelection) => {
+                if(kfTimeline.lastKeyFramesSelected.length > 1) {
                     rightArea.hide();
                     return;
                 }
                 rightArea.show();
-                trackName = data.track.id ;
-                if(  data.track.groupId != "Font" || data.track.id != "position") {
+                const track = kfTimeline.animationClip.tracks[currentSelection[0]];
+                trackName = track.id ;
+                if( track.groupId != "Font" || track.id != "position") {
                     return
                 }
-                const id = data.track.trackIdx;
-                let values = kfTimeline.animationClip.tracks[id].values;
-                const dim = kfTimeline.animationClip.tracks[id].dim;
+                const idx = track.trackIdx;
+                let values = track.values;
+                const dim = track.dim;
                 
-                //currentSelection == [track.name, track.idx, frameIdx, track.clipIdx, track.times[frameIdx]]
                 const keyFrameIndex = currentSelection[1];
                 position = values.slice(keyFrameIndex * dim, keyFrameIndex * dim + dim);
                 fillPanel(panel);
-                //kfTimeline.animationClip.tracks[currentSelection[0][0]];
             }
             
             kfTimeline.onSetTime = ( time ) => {

package/examples/video-editor.html

@@ -21,6 +21,155 @@
 
     import { LX } from 'lexgui';
     import { VideoEditor } from 'lexgui/extensions/videoeditor.js';
+
+    class Window {
+      constructor( timeline, options = {} ) {
+          this.timeline = timeline;
+          this.timeline.padding = 0;
+
+          this.start = options.start != undefined ? options.start : 0.0; // sec
+          this.end = options.end || 3.0;   // sec
+          this.center = options.center != undefined ? options.center : this.start
+
+          this.canvas = this.timeline.canvas;
+          this.windowHeight = options.windowHeight || this.canvas.height - 15;
+          this.handleWidth = options.handleWidth || 6;
+          
+          this.allowDragging = options.dragging ?? false;
+          this.dragging = false;
+          this.dragOffset = 0;
+          this.resizingLeft = false;
+          this.resizingRight = false;
+      }
+
+      draw() {
+          const ctx = this.canvas.getContext('2d');
+          let startX = Math.max( this.timeline.startX, this.timeline.timeToX(this.start) );
+          let endX = Math.min( this.timeline.endX, this.timeline.timeToX(this.end) );
+          const width = endX - startX;
+
+          // Window background
+          ctx.fillStyle = "rgba(200, 200, 255, 0.15)";
+          ctx.roundRect(startX , this.canvas.height / 2 - this.windowHeight / 2, width, this.windowHeight, 5);
+          ctx.fill();
+          // Border
+          ctx.strokeStyle = "rgba(200, 200, 255, 0.5)";
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.roundRect(startX, this.canvas.height / 2 - this.windowHeight / 2, width, this.windowHeight, 5);
+          ctx.stroke();
+
+          // Handlers
+          const offsetW = 2;
+          const offsetH = 8;
+          if( startX > this.timeline.startX ) {
+            ctx.fillStyle = "whitesmoke"//"#579aff";
+            ctx.fillRect(startX, this.canvas.height / 2 - this.windowHeight / 2, this.handleWidth, this.windowHeight);
+            ctx.fillStyle = "#579aff";
+            ctx.fillRect(startX + this.handleWidth/2 - offsetW/2, this.canvas.height / 2 - this.windowHeight / 2 + offsetH / 2 , offsetW, this.windowHeight - offsetH);
+          }
+          if( endX < this.timeline.endX ) {
+            ctx.fillStyle = "whitesmoke"//"#579aff";
+            ctx.fillRect(endX - this.handleWidth, this.canvas.height / 2 - this.windowHeight / 2, this.handleWidth, this.windowHeight);
+            ctx.fillStyle = "#579aff";   
+            ctx.fillRect(endX - this.handleWidth/2 - offsetW/2, this.canvas.height / 2 - this.windowHeight / 2 + offsetH / 2, offsetW, this.windowHeight - offsetH);       
+          }
+      }
+
+      onMouse( e ) {
+          switch(e.type) {
+              case "mousedown":
+                  this.onMouseDown( e );
+                  break;
+              case "mousemove":
+                  this.onMouseMove( e );
+                  break;
+              case "mouseup":
+                  this.onMouseUp( e );
+                  break;
+          }
+      }
+
+      onMouseDown( e ) {
+          const x = e.offsetX;
+          const startX = this.timeline.timeToX(this.start);
+          const endX = this.timeline.timeToX(this.end);
+
+          if( x >= startX && x <= startX + this.handleWidth ) {
+              this.resizingLeft = true;
+              e.cancelBubble = true;
+          }
+          else if( x >= endX - this.handleWidth && x <= endX ) {
+              this.resizingRight = true;
+              e.cancelBubble = true;
+          }
+          else if( this.allowDragging &&  x >= startX && x <= endX ) {
+              this.dragging = true;
+              this.dragOffset = x - startX;
+              e.cancelBubble = true;
+          }
+      }
+
+      onMouseMove( e ) {
+          const x = e.offsetX;
+          let startX = this.timeline.timeToX(this.start);
+          let endX = this.timeline.timeToX(this.end);
+          const centerX = this.timeline.timeToX(this.center);
+          if( this.resizingLeft ) {
+              startX = Math.min( centerX, Math.max( this.timeline.startX, x ) );//Math.max(startX - 0.1, (x - this.timeline.padding) / (this.canvas.width - 2 * this.timeline.padding) * this.timeline.endX);
+              this.start = this.timeline.xToTime( startX );
+          }
+          else if( this.resizingRight ) {
+              endX = Math.max( centerX, Math.min( this.timeline.endX, x ) ); //Math.min(endX + 0.1, (x - this.timeline.padding) / (this.canvas.width - 2 * this.timeline.padding) * this.timeline.endX);
+              this.end = this.timeline.xToTime( endX );
+          }
+          else if( this.dragging ) {
+            const time = this.timeline.xToTime( x - this.dragOffset );
+            this.moveWindow( time )
+          }
+          else {
+              const x = e.offsetX;
+              const startX = this.timeline.timeToX(this.start);
+              const endX = this.timeline.timeToX(this.end);
+
+              if( x >= startX && x <= startX + this.handleWidth ) {
+                  this.canvas.style.cursor = "col-resize";
+                  e.cancelBubble = true;
+              }
+              else if( x >= endX - this.handleWidth && x <= endX ) {
+                  this.canvas.style.cursor = "col-resize";
+                  e.cancelBubble = true;
+              }
+              return;
+          }
+          e.cancelBubble = true;
+          this.timeline._draw();
+      }
+
+      onMouseUp( e ) {
+          this.dragging = false;
+          this.resizingLeft = false;
+          this.resizingRight = false;
+      }
+
+      moveWindow( time ) {
+
+          const leftOffset = this.start - this.center;
+          const rightOffset = this.end - this.center;
+
+          // const startX = this.timeline.timeToX( time + leftOffset );
+          // const endX = this.timeline.timeToX( rightOffset );
+
+          // const windowLength = this.end - this.start;
+          
+          // newStart = Math.max(0, Math.min(this.timeline.endX - windowLength, startX));
+          this.start = time + leftOffset;
+          this.end = time + rightOffset;
+          this.center = time;
+      }
+
+  }
+
     // init library and get main area
     let area = await LX.init();
 
@@ -33,9 +182,9 @@
     video.src = "../data/video.mp4";
     videoArea.attach(video);
 
-    const videoEditor = new LX.VideoEditor(leftArea, { videoArea, video, crop: true })
-    videoEditor._loadVideo();
-    
+    const videoEditor = new LX.VideoEditor(leftArea, { videoArea, video, crop: true, loop: true })
+    videoEditor.loadVideo();
+
     const canvas = document.createElement('canvas');
     canvas.width = video.clientWidth;
     canvas.height = video.clientHeight;

package/examples/video-editor2.html

@@ -30,7 +30,7 @@
     // Split main area
     let [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"], minimizable: true });
     let [topArea, bottomArea] = leftArea.split({ sizes: ["80%", null], minimizable: false, resize: false, type: "vertical" });
-    let [controlsArea, buttonsArea] = bottomArea.split({ sizes: ["50%", null], minimizable: false, resize: false, type: "vertical" });
+    let [controlsArea, buttonsArea] = bottomArea.split({ sizes: ["50%", null], minimizable: false, type: "vertical" });
     area.extend();
 
     /* Create video area with a menubar */
@@ -41,7 +41,8 @@
     video.src = "../data/video.mp4";
     videoArea.attach(video);
     const videoEditor = new LX.VideoEditor(topArea, { videoArea, video, controlsArea })
-    videoEditor._loadVideo();
+    videoEditor.loadVideo();
+    
     /* Add canvas above video */
     const canvas = document.createElement('canvas');
     canvas.width = video.clientWidth;
@@ -72,7 +73,7 @@
         icon: "Info",
         name: "Properties",
         callback: (v, e) => {
-            if (area.split_extended) {
+            if (area.splitExtended) {
                 area.reduce();
             }
             else {
@@ -92,8 +93,7 @@
     /* Create right panel */
     let panel = new LX.Panel({ id: "Properties" });
     panel = rightArea.addPanel({ id: "Properties" });
-    createBlendShapesInspector({ "Name 1": 0, "Name 2": 0, "Name 3": 0.5, "Name 4": 0, "Name 5": 1, },
-        { inspector: panel });
+    createBlendShapesInspector({ "Name 1": 0, "Name 2": 0, "Name 3": 0.5, "Name 4": 0, "Name 5": 1, }, { inspector: panel });
 
     /* Functions */
     function createBlendShapesInspector(bsNames, options = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.7.8",
+    "version": "0.7.10",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",