lexgui 0.6.9 → 0.6.11

package/README.md

@@ -6,15 +6,15 @@ NPM Package: [npmjs.com/package/lexgui](https://www.npmjs.com/package/lexgui)
 
 <table>
   <tr>
-    <td valign="top"><img src="data/Screenshot.png"/></td>
-    <td valign="top"><img src="data/Screenshot_Godot.png"/></td>
+    <td valign="top"><img src="data/Screenshot_Editor.png"/></td>
+    <td valign="top"><img src="data/Screenshot_Examples.png"/></td>
   </tr>
 </table>
 
 <table>
   <tr>
     <td valign="top"><h3>Code Editor</h3><img src="data/Screenshot_Code.png"/></td>
-    <td valign="top"><h3>Node Graph Editor (WIP)</h3><img src="data/Screenshot_Graph.png"/></td>
+    <td valign="top"><h3>Node Graph Editor</h3><img src="data/Screenshot_Graph.png"/></td>
   </tr>
 </table>
 

package/build/components/docmaker.js

@@ -7,9 +7,9 @@ if( !LX )
     throw( "lexgui.js missing!" );
 }
 
-const CPP_KEY_WORDS = ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 'NULL', 'unsigned', 'namespace'];
+const CPP_KEY_WORDS = ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 'NULL', 'unsigned', 'namespace', 'auto'];
 const CLASS_WORDS = ['uint32_t', 'uint64_t', 'uint8_t'];
-const STATEMENT_WORDS = ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'import', 'from'];
+const STATEMENT_WORDS = ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'import', 'from', 'await'];
 
 const JS_KEY_WORDS = ['var', 'let', 'const', 'static', 'function', 'null', 'undefined', 'new', 'delete', 'true', 'false', 'NaN', 'this'];
 const HTML_ATTRIBUTES = ['html', 'charset', 'rel', 'src', 'href', 'crossorigin', 'type', 'lang'];

package/build/components/timeline.js

@@ -162,7 +162,7 @@ class Timeline {
         const playbtn = header.addButton("playBtn", '', (value, event) => {
            this.changeState();
         }, { buttonClass: "accept", title: "Play", hideName: true, icon: "Play@solid", swap: "Pause@solid" });
-        playbtn.root.setState(this.playing, true);
+        playbtn.setState(this.playing, true);
 
         header.addButton("stopBtn", '', (value, event) => {
             this.setState(false, true); // skip callback of set state
@@ -972,7 +972,7 @@ class Timeline {
     setState(state, skipCallback = false) {
         this.playing = state;
 
-        this.header.widgets.playBtn.root.setState(this.playing, true);
+        this.header.widgets.playBtn.setState(this.playing, true);
 
         if(this.onStateChange && !skipCallback) {
             this.onStateChange(this.playing);
@@ -1290,7 +1290,7 @@ class Timeline {
      * @param {obj} options set some values for the track instance (groups and trackIdx not included)
      * @returns 
      */
-    instantiateTrack(options = {}) { 
+    instantiateTrack(options = {}, clone = false) { 
         return {
             isTrack: true,
             id: options.id ?? ( Math.floor(performance.now().toString()) + "_" + Math.floor(Math.random() * 0xffff) ), //must be unique, at least inside a group
@@ -1307,13 +1307,12 @@ class Timeline {
      * @param {obj} animation data with which to generate an animationClip 
      * @returns 
      */
-    instantiateAnimationClip(options) {
+    instantiateAnimationClip(options, clone = false) {
         options = options ?? {};
         const animationClip = {
             id: options.id ?? (options.name ?? "animationClip"),
             duration: options.duration ?? 0,
             tracks: [],
-            tracksPerGroup: options.tracksPerGroup ?? {},
             data: options.data ?? null, // user defined data
         };
         return animationClip;
@@ -1433,42 +1432,42 @@ class KeyFramesTimeline extends Timeline {
      *  id, dim, values, times, selected, edited, hovered
      * @returns 
      */
-    instantiateTrack(options ={}){
+    instantiateTrack(options ={}, clone = false){
         const track = super.instantiateTrack(options);
         track.dim = Math.max(1,options.dim ?? 1); // >= 1
         track.groupId = null,
         track.groupTrackIdx = -1, // track Idx inside group only if in group
 
-        track.values = new Float32Array(0); 
+        track.values = new Float32Array(0);
         track.times = new Float32Array(0);
         track.selected = [];
         track.edited = [];
         track.hovered = [];
 
         if ( options.values && options.times ){
-            track.values = options.values;
-            track.times = options.times;
+            track.values = clone ? options.values.slice() : options.values;
+            track.times = clone ? options.times.slice() : options.times;
             
             const numFrames = track.times.length;
             if ( options.selected && options.selected.length == numFrames ){
-                track.selected = options.selected;
+                track.selected = clone ? options.selected.slice() : options.selected;
             }else{ 
                 track.selected = (new Array(numFrames)).fill(false);
             }
             if ( options.edited && options.edited.length == numFrames ){
-                track.edited = options.edited;
+                track.edited = clone ? options.edited.slice() : options.edited;
             }else{ 
                 track.edited = (new Array(numFrames)).fill(false);
             }
             if ( options.hovered && options.hovered.length == numFrames ){
-                track.hovered = options.hovered;
+                track.hovered = clone ? options.hovered.slice() : options.hovered;
             }else{ 
                 track.hovered = (new Array(numFrames)).fill(false);
             }
         }
 
         track.curves = options.curves ?? this.defaultCurves; // only works if dim == 1
-        track.curvesRange = options.curvesRange ?? this.defaultCurvesRange.slice(0);
+        track.curvesRange = ( options.curvesRange ?? this.defaultCurvesRange ).slice();
         return track;
     }
 
@@ -1477,9 +1476,11 @@ class KeyFramesTimeline extends Timeline {
      * @param {obj} animation data with which to generate an animationClip 
      * @returns 
      */
-    instantiateAnimationClip(animation) {
+    instantiateAnimationClip(animation, clone = false) {
 
-        const animationClip = super.instantiateAnimationClip(animation);
+        const animationClip = super.instantiateAnimationClip(animation, clone);
+
+        animationClip.tracksPerGroup = {};
 
         if (animation && animation.tracks) {
             const tracksPerGroup = {};
@@ -1496,18 +1497,13 @@ class KeyFramesTimeline extends Timeline {
                     else{ valueDim = 1; }
                 }
 
-                let leftOver = values.length % valueDim; // just in case values have an incorrect length
-                let amounEntries = Math.min( times.length, values.length - leftOver );
-                times = times.slice(0, amounEntries); 
-                values = values.slice(0, amounEntries * valueDim);
-
                 let baseName = track.id ?? track.name;
                 const [groupId, trackId] = baseName ? this._getValidTrackName(baseName) : [null, null];
 
                 const toInstantiate = Object.assign({}, track);
                 toInstantiate.id = trackId;
                 toInstantiate.dim = valueDim;
-                const trackInfo = this.instantiateTrack(toInstantiate);
+                const trackInfo = this.instantiateTrack(toInstantiate, clone);
                 
                 // manual group insertion
                 if ( groupId ){
@@ -1525,13 +1521,34 @@ class KeyFramesTimeline extends Timeline {
                                 
                 animationClip.tracks.push(trackInfo);
 
-                if ( times.length ){ duration = Math.max( duration, times[times.length-1]); }
+                if ( trackInfo.times.length ){ duration = Math.max( duration, trackInfo.times[trackInfo.times.length-1]); }
             }
 
             animationClip.tracksPerGroup = tracksPerGroup;
             if ( !animation || !animation.duration ){
                 animationClip.duration = duration;
             }
+            
+            // overwrite trackspergroup
+            if ( animation.tracksPerGroup ){
+                
+                // ungroup all tracks (just in case)
+                animationClip.tracks.forEach( (v,i,arr) =>{ v.groupId = null; v.groupTrackIdx = -1; } );
+                
+                animationClip.tracksPerGroup = {};
+                let tpg = animation.tracksPerGroup;
+                for( let groupId in tpg ){
+                    const source = tpg[groupId];
+                    const target = [];
+                    for( let ti = 0; ti < source.length; ++ti ){
+                        const trackInfo = animationClip.tracks[ source[ti].trackIdx ]; // redo references
+                        target[ti] = trackInfo; 
+                        trackInfo.groupId = groupId;
+                        trackInfo.groupTrackIdx = ti; // index of track in group
+                    }
+                    animationClip.tracksPerGroup[ groupId ] = target;
+                }
+            }
         }
 
         return animationClip;
@@ -3042,6 +3059,10 @@ LX.KeyFramesTimeline = KeyFramesTimeline;
  */
 
 class ClipsTimeline extends Timeline {
+    static CLONEREASON_COPY = 1;
+    static CLONEREASON_PASTE = 2;
+    static CLONEREASON_HISTORY = 3;
+    static CLONEREASON_TRACKCLONE = 4;
 
     /**
      * @param {string} name 
@@ -3063,14 +3084,14 @@ class ClipsTimeline extends Timeline {
      * @param {obj} animation data with which to generate an animationClip 
      * @returns 
      */
-    instantiateAnimationClip(animation) {
+    instantiateAnimationClip(animation, clone = false) {
 
         const animationClip = super.instantiateAnimationClip(animation);
 
         if (animation && animation.tracks){
             for( let i = 0; i < animation.tracks.length; ++i ) {
     
-                const trackInfo = this.instantiateTrack( animation.tracks[i] );
+                const trackInfo = this.instantiateTrack( animation.tracks[i], clone );
                 trackInfo.trackIdx = animationClip.tracks.length;
 
                 animationClip.tracks.push(trackInfo);
@@ -3080,6 +3101,47 @@ class ClipsTimeline extends Timeline {
         return animationClip;
     }
 
+    /**
+     * 
+     * @param {obj} options set some values for the track instance (groups and trackIdx not included)
+     * @returns 
+    */
+    instantiateTrack(options = {}, clone = false) {
+        const track = super.instantiateTrack(options);
+
+        track.trackIdx = this.animationClip.tracks.length;
+
+        track.selected = [];
+        track.edited = [];
+        track.hovered = [];
+        
+        if( options.clips ){
+            track.clips = clone ? this.cloneClips(options.clips, 0, ClipsTimeline.CLONEREASON_TRACKCLONE) : options.clips;
+        }else{
+            track.clips = [];
+        }
+
+        const numClips = track.clips.length;
+
+        if ( options.selected && options.selected.length == numClips ){
+            track.selected = clone ? options.selected.slice() : options.selected;
+        }else{ 
+            track.selected = (new Array(numClips)).fill(false);
+        }
+        if ( options.edited && options.edited.length == numClips ){
+            track.edited = clone ? options.edited.slice() : options.edited;
+        }else{ 
+            track.edited = (new Array(numClips)).fill(false);
+        }
+        if ( options.hovered && options.hovered.length == numClips ){
+            track.hovered = clone ? options.hovered.slice() : options.hovered;
+        }else{ 
+            track.hovered = (new Array(numClips)).fill(false);
+        }
+
+        return track;
+    }
+
     // use default updateleftpanel
     // generateSelectedItemsTreeData(){}
 
@@ -3128,42 +3190,6 @@ class ClipsTimeline extends Timeline {
 
         this.updateLeftPanel();
     }
-            
-    /**
-     * 
-     * @param {obj} options set some values for the track instance (groups and trackIdx not included)
-     * @returns 
-    */
-    instantiateTrack(options = {}) {
-        const track = super.instantiateTrack(options);
-
-        track.trackIdx = this.animationClip.tracks.length;
-
-        track.clips = options.clips ?? [];
-        track.selected = [];
-        track.edited = [];
-        track.hovered = [];
-        
-        const numClips = track.clips.length;
-
-        if ( options.selected && options.selected.length == numClips ){
-            track.selected = options.selected;
-        }else{ 
-            track.selected = (new Array(numClips)).fill(false);
-        }
-        if ( options.edited && options.edited.length == numClips ){
-            track.edited = options.edited;
-        }else{ 
-            track.edited = (new Array(numClips)).fill(false);
-        }
-        if ( options.hovered && options.hovered.length == numClips ){
-            track.hovered = options.hovered;
-        }else{ 
-            track.hovered = (new Array(numClips)).fill(false);
-        }
-
-        return track;
-    }
 
     unHoverAll(){
         if(this.lastHovered){
@@ -3236,6 +3262,10 @@ class ClipsTimeline extends Timeline {
         let localY = e.localY;
         let track = e.track;
         
+        if ( e.button > 0 ){ 
+            return;
+        }
+        
         if(e.ctrlKey && track) { // move clips
             
             let x = e.offsetX;
@@ -3748,18 +3778,16 @@ class ClipsTimeline extends Timeline {
             }
             
 
-            // Overwrite style with small font size if it's zoomed out
-            if( this.pixelsPerSecond < 200) {
-                ctx.font = this.pixelsPerSecond * 0.06  +"px" + Timeline.FONT;
-            }
-
-            const text = clip.id ?? ""; //clip.id.replaceAll("_", " ").replaceAll("-", " ");
+            let text = clip.id ?? ""; //clip.id.replaceAll("_", " ").replaceAll("-", " ");
             const textInfo = ctx.measureText( text );
             
-            // Draw clip name if it's readable
-            if(this.pixelsPerSecond > 100) {
-                ctx.fillText( text, x + (w - textInfo.width)*0.5,  y + offset + trackHeight * 0.5);
+            let textWidth = textInfo.width;
+            if ( textWidth > w && textWidth > 0){
+                let amount = Math.floor( w * text.length / textWidth );
+                text = text.substr( 0, amount );
+                textWidth = w;
             }
+            ctx.fillText( text, x + (w - textWidth)*0.5,  y + offset + trackHeight * 0.5);
 
             ctx.fillStyle = track.hovered[j] ? "white" : "#f5f5f5"//track.hovered[j] ? "white" : Timeline.FONT_COLOR_QUATERNARY;
             ctx.strokeStyle = "rgba(125,125,125,0.4)";
@@ -4029,9 +4057,10 @@ class ClipsTimeline extends Timeline {
      * User defined. Used when copying and pasting
      * @param {Array of clips} clipsToClone array of original clips. Do not modify clips in this array
      * @param {float} timeOffset Value of time that should be added (or subtracted) from the timing attributes 
+     * @param {int} reason Flag to signal the reason of the clone
      * @returns {Array of clips}
      */
-    cloneClips( clipsToClone, timeOffset ){
+    cloneClips( clipsToClone, timeOffset, reason = 0 ){
         let clipsToReturn = JSON.parse(JSON.stringify(clipsToClone))
         for(let i = 0; i < clipsToReturn.length; ++i){
             let clip = clipsToReturn[i];
@@ -4064,7 +4093,7 @@ class ClipsTimeline extends Timeline {
         }
 
         globalStart = Math.max(0, globalStart);
-        this.clipboard = this.cloneClips( clipsToCopy, -globalStart );
+        this.clipboard = this.cloneClips( clipsToCopy, -globalStart, ClipsTimeline.CLONEREASON_COPY );
     }
 
     pasteContent( time = this.currentTime ) {
@@ -4075,7 +4104,7 @@ class ClipsTimeline extends Timeline {
 
         time = Math.max(0, time);
 
-        let clipsToAdd = this.cloneClips( this.clipboard, time );
+        let clipsToAdd = this.cloneClips( this.clipboard, time, ClipsTimeline.CLONEREASON_PASTE );
         this.addClips(clipsToAdd, 0);
     }
 
@@ -4124,7 +4153,7 @@ class ClipsTimeline extends Timeline {
      */
     historyGenerateTrackStep( trackIdx ){
         const track = this.animationClip.tracks[trackIdx];
-        const clips = this.cloneClips(track.clips, 0);
+        const clips = this.cloneClips(track.clips, 0, ClipsTimeline.CLONEREASON_HISTORY);
 
         const undoStep = {
             trackIdx: trackIdx, // already done by saveState

package/build/lexgui-docs.css

@@ -5,8 +5,6 @@
 }
 
 :root {
-	color-scheme: light dark;
-
 	--border-style: 1px solid #444;
 	--panel-width: 300px;
 	--page-padding: 24px;

package/build/lexgui.css

@@ -3765,9 +3765,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexlayers {
     display: grid;
-    grid-template-columns: 18px 18px 18px 18px 18px 18px 18px 18px;
+    grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
     grid-gap: 6px 8px;
-    justify-content: center;
+    max-width: calc(26px * 8); /* 8 layers max */
 }
 
 .lexlayer {
@@ -3775,6 +3775,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: var(--layer-color);
     color: var(--global-text-primary);
     text-align: center;
+    place-self: center;
     line-height: 19px;
     width: 18px;
     height: 18px;
@@ -4585,9 +4586,10 @@ ul.lexassetscontent {
 }
 
 .lexassetscontent .lexitemdesc {
-    position: absolute;
+    position: fixed;
     font-weight: 600;
-    background-color: #afafaf;
+    white-space: nowrap;
+    background-color: var(--global-text-secondary);
     color: var(--global-color-primary);
     font-size: var(--global-font-size);
     border-radius: 6px;
@@ -4769,6 +4771,39 @@ ul.lexassetscontent {
     transform: scale(1.12);
 }
 
+/* Tour */
+
+.tour-mask {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #1f1f1fe7;
+    --webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    z-index: 99;
+    clip-path: url(#svgTourClipPath);
+}
+
+.tour-ref-mask {
+    position: absolute;
+    background-color: #1f1f1fe7;
+    --webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    z-index: 100;
+    mask: url(#svgTourReferenceMask);
+}
+
+.tour-step-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: var(--global-text-quaternary);
+    display: inline-flex;
+}
+
+.tour-step-indicator.active {
+    background-color: var(--global-text-primary);
+}
+
 /* Code Editor */
 .codebasearea {
     display: flex;