lexgui 0.7.2 → 0.7.4

package/build/extensions/videoeditor.js

@@ -325,7 +325,15 @@ class VideoEditor {
 
         this.mainArea = area;
 
-        let [videoArea, controlsArea] = area.split({ type: 'vertical', sizes: ["85%", null], minimizable: false, resize: false });
+        let videoArea = null;
+        let controlsArea = null;
+        if(options.controlsArea) {
+            videoArea = area;
+            controlsArea = options.controlsArea;
+        }
+        else {
+            [videoArea, controlsArea] = area.split({ type: 'vertical', sizes: ["85%", null], minimizable: false, resize: false });
+        }
         controlsArea.root.classList.add('lexconstrolsarea');
         
         this.cropArea = document.createElement("div");
@@ -347,6 +355,7 @@ class VideoEditor {
             this.video.src = options.src;
             this._loadVideo(options);
         }
+        
         if(options.videoArea) {
             options.videoArea.root.classList.add("lexvideoeditor");
             options.videoArea.attach(this.cropArea);
@@ -396,7 +405,7 @@ class VideoEditor {
                 this.controlsPanelLeft.refresh();
             }, { width: '40px', icon: (this.playing ? 'Pause@solid' : 'Play@solid'), className: "justify-center"});
 
-            this.controlsPanelLeft.addLabel(this.startTimeString, {width: 50});
+            this.controlsPanelLeft.addLabel(this.startTimeString, {width: 100});
             this.controlsPanelLeft.endLine();
 
             let availableWidth = leftArea.root.clientWidth - controlsLeft.root.clientWidth;
@@ -411,7 +420,7 @@ class VideoEditor {
         this.controlsPanelRight = new LX.Panel({className: 'lexcontrolspanel'});
         this.controlsPanelRight.refresh = () => {
             this.controlsPanelRight.clear();
-            this.controlsPanelRight.addLabel(this.endTimeString, {width: 50});
+            this.controlsPanelRight.addLabel(this.endTimeString, {width: 100});
         }
         this.controlsPanelRight.refresh();
         controlsRight.root.style.minWidth = 'fit-content';
@@ -464,13 +473,15 @@ class VideoEditor {
             this.timebar.resize([availableWidth, v.height]);
         }
 
+        const parent = controlsArea.parentElement ? controlsArea.parentElement : controlsArea.root.parentElement;
+
         // Add canvas event listeneres
-        area.root.addEventListener( "mousedown", (event) => {
+        parent.addEventListener( "mousedown", (event) => {
             if(this.controls) {
                 this.timebar.onMouseDown(event);
             }
         });
-        area.root.addEventListener( "mouseup",   (event) => {
+        parent.addEventListener( "mouseup",   (event) => {
             if(this.controls) {
                 this.timebar.onMouseUp(event);
             }
@@ -484,7 +495,7 @@ class VideoEditor {
             this.isResizing = false;
 
         });
-        area.root.addEventListener( "mousemove", (event) => {
+        parent.addEventListener( "mousemove", (event) => {
             if(this.controls) {
                 this.timebar.onMouseMove(event);
             }

package/build/lexgui.css

@@ -4923,6 +4923,7 @@ ul.lexassetscontent {
     display: flex;
     position: relative;
     overflow: inherit;
+    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background));
 }
 
 .codebasearea * {
@@ -4997,6 +4998,7 @@ ul.lexassetscontent {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    background-color: inherit;
 }
 
 .lexcodeeditor .lexareatabscontent {
@@ -5014,37 +5016,23 @@ ul.lexassetscontent {
 
 .lexcodegutter {
     width: 48px;
-    height: calc(100% - 65px);
-    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background));
-    margin-top: 31px;
+    background-color: inherit;
     overflow: hidden;
     position: absolute;
     top: 0;
 }
 
-.lexcodeeditor .codetabsarea {
-    height: 100% !important;
-    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background));
+.lexcodeeditor .lexcodearea {
+    width: 100%;
+    background-color: inherit;
     overflow: scroll;
 }
 
-.lexcodeeditor .codetabsarea.no-code-info {
-    height: calc(100% - 28px) !important;
-}
-
-.lexcodeeditor .codetabsarea::-webkit-scrollbar {
+.lexcodeeditor .lexcodearea::-webkit-scrollbar {
     display: none;
 }
 
-.lexcodeeditor .codetabsarea.with-vscrollbar {
-    width: 100% !important;
-}
-
-.lexcodeeditor .codetabsarea.with-hscrollbar {
-    height: calc(100% - 72px) !important;
-}
-
-.lexcodeeditor .codetabsarea.dragging {
+.lexcodeeditor .lexcodearea.dragging {
     background-color: var(--global-color-secondary);
 }
 
@@ -5109,6 +5097,10 @@ ul.lexassetscontent {
     background-color: #db21212f !important;
 }
 
+.lexcodeeditor pre.debug {
+    background-color: #fffb002f !important;
+}
+
 .lexcodeeditor.disabled .lexareatab {
     cursor: default;
 }
@@ -5143,6 +5135,10 @@ ul.lexassetscontent {
     z-index: 1;
 }
 
+.lexcodeeditor pre.active-line .line-gutter {
+    color: var(--global-text-primary);
+}
+
 .lexcodeeditor.no-gutter pre .line-gutter {
     opacity: 0;
 }
@@ -5188,31 +5184,21 @@ ul.lexassetscontent {
 
 .lexcodescrollbar {
     width: 10px;
-    height: calc(100% - 62px);
     position: absolute;
     background-color: transparent;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    margin-top: 31px;
     z-index: 1 !important;
     right: 0px;
     pointer-events: none;
 }
 
 .lexcodescrollbar.horizontal {
-    width: calc(100% - 58px);
+    width: calc(100% - 48px);
     height: 10px;
-    bottom: 47px;
-    right: 10px;
-}
-
-.codebasearea:has(.codetabsarea.no-code-info) .lexcodescrollbar.horizontal {
     bottom: 0px;
-}
-
-.lexcodescrollbar.scrollbar-unused {
-    display: none;
+    left: 48px; /* gutter offset */
 }
 
 .lexcodescrollbar div {
@@ -5334,6 +5320,10 @@ ul.lexassetscontent {
     background-color: var(--global-color-accent);
 }
 
+.lexcodeeditor .autocomplete pre.selected svg {
+    color: white !important;
+}
+
 .lexcodeeditor .autocomplete pre span {
     cursor: inherit;
 }
@@ -5419,6 +5409,7 @@ ul.lexassetscontent {
 .cm-mtd.wgsl { color: #dfe093; }  /* method */
 .cm-sym.wgsl { color: #f9cb20; }  /* symbol */
 .cm-ppc.wgsl { color: #99caf1; }  /* preprocessor */
+.cm-bln.wgsl { color: #bebebe; }  /* builtin */
 
 .cm-sym.rust { color: #e7ded2; }  /* symbol */
 .cm-mtd.rust { color: #e0cc68 }   /* method */
@@ -5437,8 +5428,9 @@ ul.lexassetscontent {
 .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
 .cm-sym.php { color: #cf6dcf; }  /* symbol */
-.cm-mtd.php { color: #e0cc68 }   /* method */
-.cm-bln.php { color: #e0cc68; }  /* builtin */
+.cm-mtd.php { color: #ddce80 }   /* method */
+.cm-bln.php { color: #ddce80; }  /* builtin */
+.cm-var.php { color: #88bde9; }  /* variable */
 
 :root[data-theme="light"] .lexcodeeditor pre.active-line {
     background-color: #e4e0e0ab;

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.7.2",
+    version: "0.7.4",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -382,7 +382,7 @@ function _createCommandbar( root )
             const instances = LX.CodeEditor.getInstances();
             if( !instances.length || !instances[ 0 ].area.root.offsetHeight ) return;
 
-            const languages = instances[ 0 ].languages;
+            const languages = LX.CodeEditor.languages;
 
             for( let l of Object.keys( languages ) )
             {
@@ -1281,7 +1281,7 @@ class DropdownMenu {
         }
         else if( item.icon )
         {
-            const icon = LX.makeIcon( item.icon, { svgClass: disabled ? "fg-tertiary" : item.className } );
+            const icon = LX.makeIcon( item.icon, { svgClass: disabled ? "fg-tertiary" : item.svgClass ?? item.className } );
             menuItem.prepend( icon );
         }
         else if( item.checked == undefined && applyIconPadding ) // no checkbox, no icon, apply padding if there's checkbox or icon in other items
@@ -4555,6 +4555,7 @@ Element.prototype.ignore = function( eventName, callbackName ) {
 
 const RAW_ICONS = {
     // Internals
+    "Abc": [24, 24, [], "regular", "M17 15q-.425 0-.712-.288T16 14v-4q0-.425.288-.712T17 9h3q.425 0 .713.288T21 10v1h-1.5v-.5h-2v3h2V13H21v1q0 .425-.288.713T20 15zm-7.5 0V9h4q.425 0 .713.288T14.5 10v1q0 .425-.288.713T13.5 12q.425 0 .713.288T14.5 13v1q0 .425-.288.713T13.5 15zm1.5-3.75h2v-.75h-2zm0 2.25h2v-.75h-2zM3 15v-5q0-.425.288-.712T4 9h3q.425 0 .713.288T8 10v5H6.5v-1.5h-2V15zm1.5-3h2v-1.5h-2z"],
     "Clone": [512, 512, [], "regular", "M64 464l224 0c8.8 0 16-7.2 16-16l0-64 48 0 0 64c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64l64 0 0 48-64 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16zM224 304l224 0c8.8 0 16-7.2 16-16l0-224c0-8.8-7.2-16-16-16L224 48c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16zm-64-16l0-224c0-35.3 28.7-64 64-64L448 0c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64l-224 0c-35.3 0-64-28.7-64-64z"],
     "IdBadge": [384, 512, [], "regular", "M256 48l0 16c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-16L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0c8.8 0 16-7.2 16-16l0-384c0-8.8-7.2-16-16-16l-64 0zM0 64C0 28.7 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zM160 320l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16L96 416c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"],
     "Paste": [512, 512, [], "regular", "M104.6 48L64 48C28.7 48 0 76.7 0 112L0 384c0 35.3 28.7 64 64 64l96 0 0-48-96 0c-8.8 0-16-7.2-16-16l0-272c0-8.8 7.2-16 16-16l16 0c0 17.7 14.3 32 32 32l72.4 0C202 108.4 227.6 96 256 96l62 0c-7.1-27.6-32.2-48-62-48l-40.6 0C211.6 20.9 188.2 0 160 0s-51.6 20.9-55.4 48zM144 56a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zM448 464l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L464 243.9 464 448c0 8.8-7.2 16-16 16zM256 512l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9l-67.9-67.9c-9-9-21.2-14.1-33.9-14.1L256 128c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64z"],
@@ -4825,6 +4826,17 @@ function toTitleCase( str )
 
 LX.toTitleCase = toTitleCase;
 
+/**
+ * @method toKebabCase
+ * @param {String} str
+ */
+function toKebabCase( str )
+{
+    return str.replace( /[A-Z]/g, m => "-" + m.toLowerCase() );
+}
+
+LX.toKebabCase = toKebabCase;
+
 /**
  * @method getSupportedDOMName
  * @description Convert a text string to a valid DOM name