lexgui 0.1.12 → 0.1.14

package/build/components/timeline.js

@@ -69,7 +69,7 @@ class Timeline {
         this.currentScroll = 0; //in percentage
         this.currentScrollInPixels = 0; //in pixels
         this.scrollableHeight = this.size[1]; //true height of the timeline content
-        
+       
         this.secondsToPixels = this.canvas.width/this.duration;
         this.pixelsToSeconds = 1 / this.secondsToPixels;
         this.selectedItems = options.selectedItems ?? null;
@@ -145,7 +145,7 @@ class Timeline {
         LX.DEFAULT_NAME_WIDTH = "50%";
         header.sameLine();
         header.addTitle(this.name);
-                
+               
         header.addNumber("Current Time", this.currentTime, (value, event) => {
             if(value > this.duration) {
                 value = this.duration;
@@ -236,7 +236,7 @@ class Timeline {
                         'callback': (el, node) => {
                             // TO DO (apply functionality)
                             let value = el.classList.contains('fa-lock');
-                            
+                         
                             if(value) {
                                 el.title = 'Lock edition';
                                 el.classList.remove('fa-lock');
@@ -260,7 +260,7 @@ class Timeline {
                                 this.onLockTrack(el, track, node)
                             this.draw();
                         }
-                            
+                         
                     }]})
                     // panel.addTitle(track.name + (track.type? '(' + track.type + ')' : ''));
                 }
@@ -284,9 +284,9 @@ class Timeline {
         panel.attach(p.root)
         p.root.style.overflowY = "scroll";
         p.root.addEventListener("scroll", (e) => {
-            
+           
             this.currentScroll = e.currentTarget.scrollTop/(e.currentTarget.scrollHeight - e.currentTarget.clientHeight);
-            })
+         })
         // for(let i = 0; i < this.animationClip.tracks.length; i++) {
         //     let track = this.animationClip.tracks[i];
         //     panel.addTitle(track.name + (track.type? '(' + track.type + ')' : ''));
@@ -751,7 +751,7 @@ class Timeline {
         // if(!this.grabbing_timeline && !this.movingKeys)
         //     this.canvas.style.cursor = "default";
             
-        
+      
         let timeX = this.timeToX( this.currentTime );
         let current_grabbing_timeline = localY < this.topMargin && localX > this.session.left_margin && 
         localX > (timeX - 6) && localX < (timeX + 6);
@@ -761,7 +761,7 @@ class Timeline {
         else if(this.movingKeys) {
             this.canvas.style.cursor = "grabbing";    
         }
-            else 
+         else 
             this.canvas.style.cursor = "default";
 
         if( e.type == "wheel" ) {
@@ -787,7 +787,7 @@ class Timeline {
         for(var i = this.tracksDrawn.length - 1; i >= 0; --i)
         {
             var t = this.tracksDrawn[i];
-            if( localY >= t[1] && localY < (t[1] + t[2]) )
+            if( t[1] >= this.topMargin && localY >= t[1] && localY < (t[1] + t[2]) )
             {
                 track = t[0];
                 break;
@@ -798,7 +798,7 @@ class Timeline {
         e.localX = localX;
         e.localY = localY;
 
-        
+       
 
         const innerSetTime = (t) => { 
             LX.emit( "@on_current_time_" + this.constructor.name, t);
@@ -820,10 +820,6 @@ class Timeline {
             const discard = this.movingKeys || (LX.UTILS.getTime() - this.clickTime) > 420; // ms
             this.movingKeys ? innerSetTime( this.currentTime ) : 0;
 
-            if(e.button == 0 && this.grabbing && this.onClipMoved && this.lastClipsSelected.length){
-                this.onClipMoved(this.lastClipsSelected);
-            }
-
             this.grabbing_timeline = false;
             this.grabbing = false;
             this.grabbingScroll = false;
@@ -1055,7 +1051,7 @@ class Timeline {
         let trackAlpha = 1;
 
         if(clips) {
-        
+     
             for(var j = 0; j < clips.length; ++j)
             {
                 selectedClipArea = null;
@@ -1073,10 +1069,10 @@ class Timeline {
                 ctx.fillStyle = clip.clipColor || "#5e9fdd"//#333";
                 //ctx.fillRect(x,y,w,trackHeight);
                 ctx.roundRect( x, y + offset, w, trackHeight , 5, true);
-                
+               
                 let fadeinX = this.secondsToPixels * ((clip.fadein || 0) - clip.start);
                 let fadeoutX = this.secondsToPixels * (clip.start + clip.duration - (clip.fadeout || (clip.start + clip.duration)));
-    
+   
                 let color = LX.UTILS.HexToRgb(ctx.fillStyle);
                 color = color.map(x => x*=0.8);
                 ctx.fillStyle = 'rgba(' + color.join(',') + ', 0.8)';
@@ -1085,7 +1081,7 @@ class Timeline {
                     ctx.roundRect(x, y + offset, fadeinX, trackHeight, {tl: 5, bl: 5, tr:0, br:0}, true);
                 if(fadeoutX)
                     ctx.roundRect( x + w - fadeoutX, y + offset, fadeoutX, trackHeight, {tl: 0, bl: 0, tr:5, br:5}, true);
-                
+               
                 //draw clip outline
                 if(clip.hidden)
                     ctx.globalAlpha = trackAlpha * 0.5;
@@ -1214,7 +1210,7 @@ class Timeline {
                 if(tracks[i].type != type && tracks.length > 1)
                     continue;
                     this.tracksPerItem[name][i].hide = hide;
-                //      trackInfo = this.tracksPerItem[name][i];
+              //      trackInfo = this.tracksPerItem[name][i];
             }
         }
         
@@ -1242,7 +1238,7 @@ class Timeline {
         this.resizeCanvas([w , size[1]]);
         
         // this.session.start_time = 0;
-        
+       
 
     }
 
@@ -1541,7 +1537,7 @@ class KeyFramesTimeline extends Timeline {
                     title: "Copy",// + " <i class='bi bi-clipboard-fill float-right'></i>",
                     callback: () => {
                         this.copyContent();
-                        
+                       
                     }
                 }
             )
@@ -1613,7 +1609,7 @@ class KeyFramesTimeline extends Timeline {
             }
             offset += offsetI * height + height;
         }
-            
+         
         ctx.restore();
     };
 
@@ -1704,7 +1700,7 @@ class KeyFramesTimeline extends Timeline {
 
             track.optimize( this.optimizeThreshold );
             if(this.onOptimizeTracks)
-                this.onOptimizeTracks(trackIdx);
+               this.onOptimizeTracks(trackIdx);
         }
     }
 
@@ -1905,7 +1901,7 @@ class KeyFramesTimeline extends Timeline {
         return this.clipboard != null;
     }
 
-    _paste( track, index ) {
+    #paste( track, index ) {
 
         let clipboardInfo = this.clipboard.value;
 
@@ -1931,7 +1927,7 @@ class KeyFramesTimeline extends Timeline {
         this.saveState(track.clipIdx);
 
         // Copy to current key
-        this._paste( track, index );
+        this.#paste( track, index );
         
         if(!e.multipleSelection)
         return;
@@ -1941,7 +1937,7 @@ class KeyFramesTimeline extends Timeline {
 
         // Copy to every selected key
         for(let [name, idx, keyIndex] of this.lastKeyFramesSelected) {
-            this._paste( this.tracksPerItem[name][idx], keyIndex );
+            this.#paste( this.tracksPerItem[name][idx], keyIndex );
         }
     }
 
@@ -1970,7 +1966,7 @@ class KeyFramesTimeline extends Timeline {
 
         // Copy to every selected key
         for(let [name, idx, keyIndex] of this.lastKeyFramesSelected) {
-            this._paste( this.tracksPerItem[name][idx], keyIndex );
+            this.#paste( this.tracksPerItem[name][idx], keyIndex );
         }
     }
 
@@ -2023,7 +2019,7 @@ class KeyFramesTimeline extends Timeline {
         }
 
         this.animationClip.tracks[clipIdx].times = new Float32Array( timesArray );
-        
+       
         // Add values
         let valuesArray = [];
         let dim = value.length;
@@ -2074,7 +2070,7 @@ class KeyFramesTimeline extends Timeline {
      * @track: track that keyframe belongs to
      * @index: index of the keyframe on the track
     */
-    _delete( track, index ) {
+    #delete( track, index ) {
 
         // Don't remove by now the first key
         if(index == 0) {
@@ -2142,7 +2138,7 @@ class KeyFramesTimeline extends Timeline {
                 // Delete every selected key
                 for(let [name, idx, keyIndex] of pts) {
                     this.saveState(this.tracksPerItem[name][idx].clipIdx);
-                    deletedIndices += this._delete( this.tracksPerItem[name][idx], keyIndex - deletedIndices );
+                    deletedIndices += this.#delete( this.tracksPerItem[name][idx], keyIndex - deletedIndices );
                 }
             }
         }
@@ -2157,7 +2153,7 @@ class KeyFramesTimeline extends Timeline {
 
             if ( track ){
                 this.saveState(track.clipIdx);
-                this._delete( track, index );
+                this.#delete( track, index );
             }
         }
 
@@ -2362,7 +2358,7 @@ class KeyFramesTimeline extends Timeline {
         for(let i = count - 1; i >= 0; i--)
         {
             this.saveState(track.clipIdx);
-            this._delete(track, i );
+            this.#delete(track, i );
         } 
         if(defaultValue != undefined) {
             if(typeof(defaultValue) == 'number')  {
@@ -2428,7 +2424,7 @@ class ClipsTimeline extends Timeline {
         }
         
         this.draw(this.currentTime);
-        
+      
     }
 
     onMouseUp( e ) {
@@ -2539,10 +2535,12 @@ class ClipsTimeline extends Timeline {
                 //this.addUndoStep( "clip_modified", clip );
                 if( (e.ctrlKey && distToStart < 5) || (clip.fadein && Math.abs( this.timeToX( clip.start + clip.fadein ) - e.offsetX ) < 5) )
                     this.dragClipMode = "fadein";
-                else if( (e.ctrlKey && distToEnd < 5) || (clip.fadeout && Math.abs( this.timeToX( clip.start + clip.duration - clip.fadeout ) - e.offsetX ) < 5) )
-                    this.dragClipMode = "fadeout";
-                else if( Math.abs( endingX - x ) < 10 )
+                else if(e.ctrlKey &&  Math.abs( endingX - x ) < 5 ) {
                     this.dragClipMode = "duration";
+                    this.canvas.style.cursor = "column-resize";
+                }
+                else if( (e.ctrlKey && distToEnd < 10) || (clip.fadeout && Math.abs( this.timeToX( clip.start + clip.duration - clip.fadeout ) - e.offsetX ) < 5) )
+                    this.dragClipMode = "fadeout";                  
                 else
                     this.dragClipMode = "move";
             }
@@ -2588,7 +2586,7 @@ class ClipsTimeline extends Timeline {
             var curr = time - this.currentTime;
             var delta = curr - this.grabTime;
             this.grabTime = curr;
-            
+           
             var ct = Math.max(0,this.currentTime - delta);
             if( this.timelineClickedClips != undefined) {
                 this.movingKeys = true;
@@ -2615,7 +2613,7 @@ class ClipsTimeline extends Timeline {
                             // for(let i = 0; i < tracks.length; i++) {
                                 let clips = this.getClipsInRange(e.track, clip.start, clip.start + clip.duration, 0.01)
                                 if(clips == undefined || !clips.length) {
-                                    // let newClip = Object.assign({}, clip);
+                                   // let newClip = Object.assign({}, clip);
                                     let clipIndex = this.addClipInTrack(clip, e.track.idx);
                                     this.deleteClip(clip);
                                     e.track.selected[clipIndex] = true;
@@ -2630,11 +2628,16 @@ class ClipsTimeline extends Timeline {
                         }
                     }
                     else if( this.dragClipMode == "fadein" )
-                        clip.fadein = Math.min(Math.max((clip.fadein || 0) + diff, clip.start), clip.start+clip.duration);
+                        clip.fadein = Math.min(Math.max((clip.fadein || 0) + delta, clip.start), clip.start+clip.duration);
                     else if( this.dragClipMode == "fadeout" )
-                        clip.fadeout = Math.max(Math.min((clip.fadeout || clip.start+clip.duration) + diff, clip.start+clip.duration), clip.start);
-                    else if( this.dragClipMode == "duration" )
-                        clip.duration += diff;
+                        clip.fadeout = Math.max(Math.min((clip.fadeout || clip.start+clip.duration) + delta, clip.start+clip.duration), clip.start);
+                    else if( this.dragClipMode == "duration" ) {
+                        clip.duration += delta;
+                        clip.fadeout += delta;
+                        if(this.onContentMoved) {
+                            this.onContentMoved(clip, 0);
+                        }
+                    }
 
                     if(this.duration < clip.start + clip.duration  )
                     {
@@ -2646,6 +2649,14 @@ class ClipsTimeline extends Timeline {
             else{
                 innerSetTime( this.currentTime );	
             }
+        } 
+        else if(e.track && e.ctrlKey) {
+            for(let i = 0; i < e.track.clips.length; i++) {
+                let clip = e.track.clips[i];
+                const x = this.timeToX(clip.start+clip.duration);
+                if(Math.abs(e.localX - x) < 5)
+                    this.canvas.style.cursor = "col-resize";
+            }
         }
     }
 
@@ -2716,7 +2727,7 @@ class ClipsTimeline extends Timeline {
         let tracks = this.animationClip.tracks|| [{name: "NMF", clips: []}];
         if(!tracks) 
             return;
-                    
+                  
         const height = this.trackHeight;
 
         this.scrollableHeight = (tracks.length)*height + this.topMargin;
@@ -2729,7 +2740,7 @@ class ClipsTimeline extends Timeline {
         }
         
         ctx.restore();
-        
+      
     }
 
     // Creates a map for each item -> tracks
@@ -2907,8 +2918,8 @@ class ClipsTimeline extends Timeline {
             this.setDuration(end);
         }
 
-            // // Update animation action interpolation info
-            if(this.onUpdateTrack)
+         // // Update animation action interpolation info
+         if(this.onUpdateTrack)
             this.onUpdateTrack( trackIdx );
 
         LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime);
@@ -2925,13 +2936,13 @@ class ClipsTimeline extends Timeline {
         return newIdx;
     }
 
-        /** Add a clip to the timeline in a free track slot at the current time
+     /** Add a clip to the timeline in a free track slot at the current time
      * @clip: clip to be added
      * @trackIdx: track index where to add the track
      * @offsetTime: (optional) offset time of current time
      * @callback: (optional) function to call after adding the clip
     */
-        addClipInTrack( clip, trackIdx, offsetTime = 0, callback = null ) {
+     addClipInTrack( clip, trackIdx, offsetTime = 0, callback = null ) {
 
         // Time slot with other clip?
         if(!this.animationClip) 
@@ -2969,7 +2980,7 @@ class ClipsTimeline extends Timeline {
         track.selected[newIdx] = undefined;
         track.edited[newIdx] = undefined;
 
-            
+          
         let end = clip.start + clip.duration;
         
         if( end > this.duration || !this.animationClip.duration)
@@ -2977,8 +2988,8 @@ class ClipsTimeline extends Timeline {
             this.setDuration(end);
         }
 
-            // // Update animation action interpolation info
-            if(this.onUpdateTrack)
+         // // Update animation action interpolation info
+         if(this.onUpdateTrack)
             this.onUpdateTrack( trackIdx );
 
         LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime);
@@ -2996,7 +3007,7 @@ class ClipsTimeline extends Timeline {
      * @callback: (optional) function to call after adding the clip
     */
     addClips( clips, offsetTime = 0, callback = null ) {
-        
+       
         if(!this.animationClip) 
             this.addNewTrack();
 
@@ -3025,7 +3036,7 @@ class ClipsTimeline extends Timeline {
                         console.warn("There is already a clip stored in time slot ", clipInCurrentSlot)
                         if(!this.animationClip.tracks[i+1]) {
                             this.addNewTrack();
-        
+       
                             trackIdxs[c] = {trackIdx: i+1, stat: newStart, end: newStart + clip.duration};
                         }
                         else {
@@ -3192,7 +3203,7 @@ class ClipsTimeline extends Timeline {
                 // Delete every selected clip
                 for(let [trackIdx, clipIdx] of pts) {
                     this.saveState(trackIdx, clipIdx);
-                    this._delete(trackIdx, clipIdx );
+                    this.#delete(trackIdx, clipIdx );
                     deletedIndices++;
                 }
             }
@@ -3201,7 +3212,7 @@ class ClipsTimeline extends Timeline {
             const [trackIdx, clipIdx]  = clip;
 
             this.saveState(trackIdx, clipIdx);
-            this._delete( trackIdx, clipIdx );
+            this.#delete( trackIdx, clipIdx );
         }
         
 
@@ -3215,7 +3226,7 @@ class ClipsTimeline extends Timeline {
 
     }
 
-    _delete( trackIdx, clipIdx) {
+    #delete( trackIdx, clipIdx) {
 
         let clips = this.animationClip.tracks[trackIdx].clips;
         if(clipIdx >= 0)
@@ -3310,8 +3321,16 @@ class ClipsTimeline extends Timeline {
             clips: [],
             selected: [], edited: [], hovered: []
         };
-
+        //delete all selectedclips
         this.animationClip.tracks[idx] = trackInfo;
+        let selected = [];
+        for(let i = 0; i < this.lastClipsSelected.length; i++) {
+            let [trackIdx, clipIdx] = this.lastClipsSelected[i];
+            if(trackIdx != idx)
+                selected.push(this.lastClipsSelected[i]);
+
+        }
+        this.lastClipsSelected = selected;
         return trackInfo.idx;
     }
 
@@ -3376,6 +3395,19 @@ class ClipsTimeline extends Timeline {
         return unselected;
     }
 
+    selectAll( ) {
+
+        this.unSelectAllClips();
+        for(let idx = 0; idx < this.animationClip.tracks.length; idx++) {
+            for(let clipIdx = 0; clipIdx < this.animationClip.tracks[idx].clips.length; clipIdx++) {
+                this.animationClip.tracks[idx].selected[clipIdx] = true;
+                let currentSelection = [ idx, clipIdx];
+                this.lastClipsSelected.push( currentSelection );
+            }
+        }
+        if(this.onSelectClip)
+            this.onSelectClip();
+    }
     processCurrentClip( e, clipIndex, track, localX, multiple ) {
 
         e.multipleSelection = multiple;
@@ -3636,7 +3668,7 @@ class CurvesTimeline extends Timeline {
             }
             return
             
-            
+           
         }
 
         const removeHover = () => {
@@ -3763,7 +3795,7 @@ class CurvesTimeline extends Timeline {
         // this.canvasArea.root.innerHtml = "";
         let offset = this.trackHeight;
         this.scrollableHeight = this.topMargin;
-            for(let t = 0; t < this.selectedItems.length; t++) {
+         for(let t = 0; t < this.selectedItems.length; t++) {
             let tracks = this.tracksPerItem[this.selectedItems[t]] ? this.tracksPerItem[this.selectedItems[t]] : [{name: this.selectedItems[t]}];
             if(!tracks) continue;
             
@@ -3777,7 +3809,7 @@ class CurvesTimeline extends Timeline {
                 if(track.hide) {
                     continue;
                 }
-                
+               
                 this.drawTrackWithCurves(ctx, offsetI * height + offset + scroll_y, height, track.name + " (" + track.type + ")", this.animationClip.tracks[track.clipIdx], track);
                 offsetI++;
             }
@@ -3817,7 +3849,7 @@ class CurvesTimeline extends Timeline {
                 
                 ctx.save();
                 ctx.translate(keyframePosX, y );
-                
+               
                 if( keyframePosX <=  this.sidebarWidth ){
                     ctx.moveTo( 0, value );  
                 }
@@ -4121,7 +4153,7 @@ class CurvesTimeline extends Timeline {
     }
 
 
-    _paste( track, index ) {
+    #paste( track, index ) {
 
         let clipboardInfo = this.clipboard.value;
 
@@ -4148,7 +4180,7 @@ class CurvesTimeline extends Timeline {
         this.saveState(track.clipIdx);
 
         // Copy to current key
-        this._paste( track, index );
+        this.#paste( track, index );
         
         if(!e.multipleSelection)
         return;
@@ -4158,7 +4190,7 @@ class CurvesTimeline extends Timeline {
 
         // Copy to every selected key
         for(let [name, idx, keyIndex] of this.lastKeyFramesSelected) {
-            this._paste( this.tracksPerItem[name][idx], keyIndex );
+            this.#paste( this.tracksPerItem[name][idx], keyIndex );
         }
     }
 
@@ -4167,7 +4199,7 @@ class CurvesTimeline extends Timeline {
         this.saveState(track.clipIdx);
 
         // Copy to current key
-        this._paste( track, index );
+        this.#paste( track, index );
         
         if(!e.multipleSelection)
         return;
@@ -4177,7 +4209,7 @@ class CurvesTimeline extends Timeline {
 
         // Copy to every selected key
         for(let [name, idx, keyIndex] of this.lastKeyFramesSelected) {
-            this._paste( this.tracksPerItem[name][idx], keyIndex );
+            this.#paste( this.tracksPerItem[name][idx], keyIndex );
         }
     }
 
@@ -4249,7 +4281,7 @@ class CurvesTimeline extends Timeline {
         track.hovered[newIdx] = undefined;
         track.selected[newIdx] = undefined;
         track.edited[newIdx] = true;
-        
+       
 
         // Update animation action interpolation info
         if(this.onUpdateTrack)
@@ -4271,7 +4303,7 @@ class CurvesTimeline extends Timeline {
      * @track: track that keyframe belongs to
      * @index: index of the keyframe on the track
     */
-    _delete( track, index ) {
+    #delete( track, index ) {
 
         // Don't remove by now the first key
         if(index == 0) {
@@ -4339,7 +4371,7 @@ class CurvesTimeline extends Timeline {
                 // Delete every selected key
                 for(let [name, idx, keyIndex] of pts) {
                     this.saveState(this.tracksPerItem[name][idx].clipIdx);
-                    let deleted = this._delete( this.tracksPerItem[name][idx], keyIndex - deletedIndices );
+                    let deleted = this.#delete( this.tracksPerItem[name][idx], keyIndex - deletedIndices );
                     deletedIndices += deleted ? 1 : 0;
                 }
             }
@@ -4355,7 +4387,7 @@ class CurvesTimeline extends Timeline {
 
             if ( track ){
                 this.saveState(track.clipIdx);
-                this._delete( track, index );
+                this.#delete( track, index );
             }
         }
 
@@ -4379,7 +4411,7 @@ class CurvesTimeline extends Timeline {
         for(let i = count - 1; i >= 0; i--)
         {
             this.saveState(track.clipIdx);
-            this._delete(track, i );
+            this.#delete(track, i );
         } 
         if(defaultValue != undefined) {
             if(typeof(defaultValue) == 'number')  {
@@ -4527,7 +4559,7 @@ class CurvesTimeline extends Timeline {
         const name = this.tracksDictionary[track.fullname];
         let t = this.tracksPerItem[ name ][track.idx];
         let currentSelection = [name, track.idx, keyFrameIndex];
-        if(!multiple)
+       if(!multiple)
             this.selectKeyFrame(t, currentSelection, keyFrameIndex);
         else
             this.lastKeyFramesSelected.push( currentSelection );
@@ -4599,7 +4631,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, rad
         this.fill();
     }
     if (stroke) {
-        this.stroke();
+     this.stroke();
     }
 }
 

package/build/lexgui.css

@@ -2900,6 +2900,14 @@ ul.lexassetscontent {
   margin: 0;
   pointer-events: unset;
   cursor: default;
+  height: 18px;
+}
+
+.lexcodeeditor .autocomplete pre a {
+  font-size: 11px;
+  margin-top: 4px;
+  margin-right: 6px;
+  margin-left: 2px;
 }
 
 .lexcodeeditor .autocomplete pre:hover {
@@ -2912,7 +2920,6 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete pre span {
-  margin: 2px 0px;
   cursor: inherit;
 }
 
@@ -2924,15 +2931,26 @@ ul.lexassetscontent {
   color: #95a0e1;
 }
 
-.cm-str { color: #d0774e; } /* string */
-.cm-kwd { color: #218cce; } /* keyword */
-.cm-com { color: #5cab5a; } /* comment */
-.cm-typ { color: #36c0b0; } /* type */
-.cm-std { color: #cf6dcf; } /* statements & declarations */
-.cm-bln { color: inherit; } /* builtin */
-.cm-dec { color: #b1ce9b; } /* decimal */
-.cm-sym { color: #e7ded2; } /* symbol */
-.cm-mtd { color: #e0cc68 } /* method */
+.cm-str.javascript { color: #d0774e; } /* string */
+.cm-kwd.javascript { color: #218cce; } /* keyword */
+.cm-com.javascript { color: #5cab5a; } /* comment */
+.cm-typ.javascript { color: #36c0b0; } /* type */
+.cm-std.javascript { color: #cf6dcf; } /* statements & declarations */
+.cm-bln.javascript { color: inherit; } /* builtin */
+.cm-dec.javascript { color: #b1ce9b; } /* decimal */
+.cm-sym.javascript { color: #e7ded2; } /* symbol */
+.cm-mtd.javascript { color: #e0cc68 } /* method */
+
+.cm-str.cpp { color: #d0774e; } /* string */
+.cm-kwd.cpp { color: #218cce; } /* keyword */
+.cm-com.cpp { color: #5cab5a; } /* comment */
+.cm-typ.cpp { color: #36c0b0; } /* type */
+.cm-std.cpp { color: #cf6dcf; } /* statements & declarations */
+.cm-bln.cpp { color: #d44141; } /* builtin */
+.cm-dec.cpp { color: #2ddf53; } /* decimal */
+.cm-sym.cpp { color: #e7ded2; } /* symbol */
+.cm-mtd.cpp { color: #7493d6 } /* method */
+.cm-ppc.cpp { color: #969696 } /* preprocessor */
 
 .cm-str.css { color: #d0774e; } /* string */
 .cm-kwd.css { color: #e8be53; } /* keyword */
@@ -2974,6 +2992,16 @@ ul.lexassetscontent {
 .cm-sym.wgsl { color: #f9cb20; } /* symbol */
 .cm-mtd.wgsl { color: #e0cc68; } /* method */
 
+.cm-str.python { color: #d0774e; } /* string */
+.cm-kwd.python { color: #218cce; } /* keyword */
+.cm-com.python { color: #5cab5a; } /* comment */
+.cm-typ.python { color: #36c0b0; } /* type */
+.cm-std.python { color: #cf6dcf; } /* statements & declarations */
+.cm-bln.python { color: inherit; } /* builtin */
+.cm-dec.python { color: #b1ce9b; } /* decimal */
+.cm-sym.python { color: #e7ded2; } /* symbol */
+.cm-mtd.python { color: #e0cc68 } /* method */
+
 /* plain color */
 .cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-std.plaintext, 
 .cm-bln.plaintext, .cm-dec.plaintext, .cm-sym.plaintext, .cm-mtd.plaintext { color: inherit; }