lexgui 0.7.15 → 8.1.0

package/examples/dialogs.html

@@ -47,7 +47,6 @@
     }, { float: 'lt' });
 
     const dialogClosable = new LX.Dialog("Closable Dialog", p => {
-        p.branch("Canvas");
         p.addColor("Background", "#b7a9b1");
         p.addText("Text", "Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "Type" });
         p.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
@@ -62,8 +61,7 @@
         p.addSelect("Best Tool", ["@Engines", "Godot", "Unity", "Unreal Engine", "@Apps", "Visual Studio", "Visual Studio Code"], "Unity", (value, event) => {
             console.log(value);
         }, {filter: true, emptyMsg: "No engines found.", placeholder: "Search engines..."});
-        p.merge();
-    }, { size: ["350px", null], closable: true });
+    }, { size: ["350px", null], position: ["100px", "500px"], closable: true });
 
     const draggablePocketDialog = new LX.PocketDialog("Draggable PocketDialog", p => {
         p.branch("Canvas");
@@ -84,6 +82,8 @@
         p.merge();
     }, { size: ["350px", null], draggable: true });
 
+    const alertDialog = new LX.AlertDialog( "Are you absolutely sure?", "This action cannot be undone. This will permanently delete your account and remove your data from our servers." );
+
     // add canvas to left upper part
     let canvas = document.createElement('canvas');
     canvas.id = "mycanvas";

package/examples/editor.html

@@ -707,7 +707,7 @@
 
         panel.branch("Preferences", { icon: "Settings" });
         panel.addButton(null, "Show Notifications" + LX.badge("+99", "accent sm"));
-        panel.addCounter("Calories Counter ", 350, (v) => { console.log(v + " calories!") }, { label: "CALORIES/DAY", max: 500 });
+        panel.addCounter("Calories Counter / day ", 350, (v) => { console.log(v + " calories!") }, { max: 500 });
         panel.addButton("Colored Tiny Button", "Click here!", () => { }, { buttonClass: "primary xs" });
         panel.addButton("Small Outlined Button", "Click here!", () => { }, { buttonClass: "accent sm outline" });
         panel.addButton("A Classic Button", "Click here!", () => { }, { buttonClass: "md" });
@@ -807,7 +807,6 @@
         panel.addButton(null, "Click me, Im Full Width...");
         panel.addButton("Test Button", "Reduced width...");
         panel.addSeparator();
-        panel.addBlank(12);
     }
 
     function fillRightBottomPanel(panel, tab) {
@@ -894,7 +893,7 @@
             /************** */
             // Custom Component
 
-            LX.ADD_CUSTOM_COMPONENT("Shader", {
+            LX.REGISTER_COMPONENT("Shader", {
                 icon: "Box",
                 default: {
                     position: [0, 0],
@@ -947,7 +946,7 @@
                 { name: "ID", type: "range", min: 0, max: 9, step: 1, units: "hr" },
             ],
             rowActions: [
-                { icon: "Edit", title: "Edit Row", callback: (tableData) => { } }, // custom: you can change the data and refresh will be called later!
+                { icon: "Edit", title: "Edit Row", callback: (idx, bodyData) => { } }, // custom: you can change the data and refresh will be called later!
                 "delete",
                 "menu"
             ],
@@ -1013,7 +1012,6 @@
                 }
             }
         });
-
     }
 
     function openSignUpDialog()
@@ -1024,20 +1022,24 @@
                 name: { label: "Name", value: "", icon: "User", pattern: { minLength: 3, noSpaces: true } },
                 email: { label: "Email", value: "", icon: "AtSign", pattern: { email: true } },
                 password: { label: "Password", value: "", type: "password", icon: "Key", pattern: { minLength: 4, digit: true } },
-                confirmPassword: { label: "Confirm password", value: "", type: "password", icon: "Key", pattern: { fieldMatchName: "password" }  }
+                confirmPassword: { label: "Confirm password", value: "", type: "password", submit: true, icon: "Key", pattern: { fieldMatchName: "password" }  }
             };
 
             const form = p.addForm( null, formData, async (value, errors) => {
 
-                console.log(errors)
-
                 errorMsg.set( "" );
 
                 if( errors.length )
                 {
+                    console.log(errors)
                     const err = errors[ 0 ];
                     errorMsg.set( `${ err.entry }: ${ err.messages.join( "\n" ) }` );
                 }
+                else
+                {
+                    dialog.close();
+                    LX.toast( "Signed Up!", "Validate your email before login.");
+                }
             }, { primaryActionName: "SignUp" });
             const errorMsg = p.addTextArea( null, "", null, { inputClass: "fg-secondary", disabled: true, fitHeight: true } );
         }, { modal: true } );
@@ -1059,17 +1061,29 @@
                     type: "password",
                     placeholder: "Enter password",
                     icon: "KeyRound",
-                    pattern: { lowercase: true, uppercase: true, digit: true, minLength: 6 }
+                    pattern: { lowercase: true, uppercase: true, digit: true, minLength: 6 },
+                    submit: true
                 }
             };
 
-            panel.addForm("Test form", formData, (value, event) => {
-                console.log(value);
-            }, { skipLabels: false, primaryActionName: "Login", secondaryActionName: "Sign Up", secondaryActionCallback: () => { console.log("Signed up") } });
+            panel.addForm("Test form", formData, (value, errors) => {
+                if( !errors.length )
+                {
+                    dialog.close();
+                    LX.toast( "Logged in!", `Welcome ${ value.Username } :)`);
+                }
+                else
+                {
+                    console.log(errors);
+                }
+            }, { skipLabels: false, primaryActionName: "Login" } );
 
             panel.addLabel("Or", { float: 'center' });
 
-            panel.addButton(null, "Sign up", (value, event) => { });
+            panel.addButton(null, "Sign up", (value, event) => {
+                dialog.close();
+                openSignUpDialog();
+            });
 
         }, { close: true, minimize: false, size: ["25%"], scroll: true, resizable: true, draggable: true });
     }

package/examples/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Examples - LexGUI.js </title>
+    <title>Examples - LexGUI</title>
     <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/favicon.png">
     <style>
@@ -38,7 +38,8 @@
             // 'Immediate UI',
             'Node Graph',
             'Side Bar',
-            "Timeline"
+            "Timeline",
+            "Video Editor"
         ];
 
         let panel = null;
@@ -57,7 +58,8 @@
         if( mobile )
         {
             const sheetArea = new LX.Area({ skipAppend: true });
-            panel = sheetArea.addPanel({ className: "flex flex-col gap-2" });
+            sheetArea.root.classList.add( "overflow-scroll" );
+            panel = sheetArea.addPanel({ height: "auto", className: "flex flex-col gap-2" });
             iFrameArea = area;
 
             overlayButtons.splice( 0, 0, {
@@ -77,8 +79,9 @@
                 { name: "Docs v" + LX.version, callback: (v, name) => { location.href = "../docs/"; } }
             ] );
             menubar.setButtonIcon("Github", "Github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
+            menubar.siblingArea.root.classList.add( "overflow-scroll" );
 
-            panel = leftArea.addPanel({ className: "flex flex-col gap-1" });
+            panel = leftArea.addPanel({ height: "auto", className: "flex flex-col gap-2" });
             iFrameArea = rightArea;
         }
 
@@ -102,17 +105,19 @@
             for( let ex of examples )
             {
                 const id = ex.replace(" ", "-").toLowerCase();
-                const options = {
-                    img: "previews/" + id + ".png",
-                    callback: function() {
-                        iframe.src = id + ".html";
-                        if( window.__currentSheet )
-                        {
-                            window.__currentSheet.destroy();
-                        }
+                const title = LX.makeContainer( ["auto", "auto"], "p-2 text-md fg-secondary font-semibold", ex, panel );
+                const container = LX.makeContainer( ["100%", "auto"], "border overflow-hidden rounded-xl cursor-pointer", "", panel );
+                const image = document.createElement( "img" );
+                image.src = "previews/" + id + ".png";
+                image.className = "w-full h-32 hover:scale-lg";
+                container.appendChild( image );
+                container.addEventListener( "click", (e) => {
+                    iframe.src = id + ".html";
+                    if( window.__currentSheet )
+                    {
+                        window.__currentSheet.destroy();
                     }
-                };
-                panel.addCard( ex, options );
+                });
             }
         }
     </script>

package/examples/node-graph.html

@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/extensions/nodegraph.js';
+    import { GraphEditor } from 'lexgui/extensions/GraphEditor.js';
 
     // init library and get main area
     let area = await LX.init();
@@ -43,7 +43,7 @@
         canvas.height = bounding.height;
     };
 
-    let graphEditor = new LX.GraphEditor( bottomArea, {
+    let graphEditor = new GraphEditor( bottomArea, {
         sidebar: false,
     } );
 

package/examples/timeline.html

@@ -18,7 +18,7 @@
     <script type="module">
 
         import { LX } from 'lexgui';
-        import { Timeline, KeyFramesTimeline, ClipsTimeline } from 'lexgui/extensions/timeline.js';
+        import { Timeline, KeyFramesTimeline, ClipsTimeline } from 'lexgui/extensions/Timeline.js';
 
         // init library and get main area
         let area = await LX.init();

package/examples/video-editor.html

@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import { VideoEditor } from 'lexgui/extensions/videoeditor.js';
+    import { VideoEditor } from 'lexgui/extensions/VideoEditor.js';
 
     class Window {
       constructor( timeline, options = {} ) {
@@ -182,7 +182,7 @@
     video.src = "../data/video.mp4";
     videoArea.attach(video);
 
-    const videoEditor = new LX.VideoEditor(leftArea, { videoArea, video, crop: true, loop: true })
+    const videoEditor = new LX.VideoEditor(leftArea, { videoArea, video, crop: true, loop: true, handleStyle: {backgroundColor: "white"} });
     videoEditor.loadVideo();
 
     const canvas = document.createElement('canvas');

package/package.json

@@ -1,17 +1,20 @@
 {
     "name": "lexgui",
-    "version": "0.7.15",
+    "version": "8.1.0",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
     "module": "./build/lexgui.module.js",
+    "exports": {
+        "require": "./build/lexgui.js",
+        "import": "./build/lexgui.module.js"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/jxarco/lexgui.js"
     },
     "files": [
         "build",
-        "build/extensions",
         "examples",
         "LICENSE",
         "package.json",
@@ -21,7 +24,7 @@
     ],
     "keywords": [
         "lexgui",
-        "lexgui.js",
+        "typescript",
         "javascript",
         "editor",
         "gui",
@@ -36,13 +39,26 @@
         "url": "https://github.com/jxarco/lexgui.js/issues"
     },
     "scripts": {
-        "rollup-js": "rollup -c rollup.build.config.js",
-        "minify-css": "cleancss -o build/lexgui.min.css build/lexgui.css",
-        "minify": "npm run rollup-js && npm run minify-css",
-        "legacy": "python build-legacy.py",
-        "build": "npm run legacy && npm run minify"
+        "format": "dprint fmt",
+        "format:check": "dprint check",
+        "colors": "node generate-colors.js",
+        "clean:css": "rimraf build/lexgui.css && rimraf build/lexgui.min.css",
+        "clean": "rimraf build",
+        "bundle": "rollup -c",
+        "bundle:ts": "rollup -c rollup.ts.build.config.js",
+        "build:ts": "tsc --project tsconfig.all.json",
+        "build": "npm run bundle:ts"
     },
     "devDependencies": {
-        "@rollup/plugin-terser": "^0.4.4"
+        "@rollup/plugin-alias": "^6.0.0",
+        "@rollup/plugin-terser": "^0.4.4",
+        "cssnano": "^7.1.2",
+        "dprint": "^0.50.2",
+        "postcss": "^8.5.6",
+        "rimraf": "^5.0.10",
+        "rollup": "^4.53.2",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-typescript2": "^0.36.0",
+        "typescript": "^5.9.3"
     }
 }

package/build/extensions/audio.js

@@ -1,212 +0,0 @@
-import { LX } from 'lexgui';
-
-if( !LX )
-{
-    throw("lexgui.js missing!");
-}
-
-LX.extensions.push( 'Audio' );
-
-/**
- * @class Knob
- * @description Knob Component
- */
-
-class Knob extends LX.BaseComponent {
-
-    constructor( name, value, min, max, callback, options = {} ) {
-
-        if( value.constructor == Number )
-        {
-            value = LX.clamp( value, min, max );
-            value = options.precision ? LX.round( value, options.precision ) : value;
-        }
-
-        super( LX.BaseComponent.KNOB, name, value, options );
-
-        this.onGetValue = () => {
-            return innerKnobCircle.value;
-        };
-
-        this.onSetValue = ( newValue, skipCallback ) => {
-            innerSetValue( newValue );
-            LX.BaseComponent._dispatchEvent( innerKnobCircle, "change", skipCallback );
-        };
-
-        this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
-            container.style.width = `calc( 100% - ${ realNameWidth })`;
-        };
-
-        const snapEnabled = ( options.snap && options.snap.constructor == Number );
-        const ticks = [];
-        if( snapEnabled )
-        {
-            const range = (max - min) / options.snap;
-            for( let i = 0; i < ( options.snap + 1 ); ++i )
-            {
-                ticks.push( min + (i  * range) );
-            }
-        }
-
-        var container = document.createElement( 'div' );
-        container.className = "lexknob";
-        container.addClass( options.size );
-        container.addClass( snapEnabled ? "show-ticks" : null );
-
-        let knobCircle = document.createElement( 'div' );
-        knobCircle.className = "knobcircle";
-        if( snapEnabled )
-        {
-            knobCircle.style.setProperty( "--knob-snap-mark", ( 270 / options.snap ) + "deg" );
-        }
-
-        let innerKnobCircle = document.createElement( 'div' );
-        innerKnobCircle.className = "innerknobcircle";
-        innerKnobCircle.min = min;
-        innerKnobCircle.max = max;
-        knobCircle.appendChild( innerKnobCircle );
-
-        let knobMarker = document.createElement( 'div' );
-        knobMarker.className = "knobmarker";
-        innerKnobCircle.appendChild( knobMarker );
-        innerKnobCircle.value = innerKnobCircle.iValue = value;
-
-        let mustSnap = false;
-        let innerSetValue = function( v ) {
-            // Convert val between (-135 and 135)
-            const angle = LX.remapRange( v, innerKnobCircle.min, innerKnobCircle.max, -135.0, 135.0 );
-            innerKnobCircle.style.rotate = angle + 'deg';
-            innerKnobCircle.value = v;
-        }
-
-        const angle = LX.remapRange( value, min, max, -135.0, 135.0 );
-        innerKnobCircle.style.rotate = angle + 'deg';
-
-        if( options.disabled )
-        {
-            container.addClass( "disabled" );
-        }
-
-        innerKnobCircle.addEventListener( "change", e => {
-
-            const knob = e.target;
-
-            const skipCallback = e.detail;
-
-            if( mustSnap )
-            {
-                knob.value = ticks.reduce(( prev, curr ) => Math.abs( curr - knob.value ) < Math.abs( prev - knob.value ) ? curr : prev );
-            }
-
-            let val = knob.value = LX.clamp( knob.value, knob.min, knob.max );
-            val = options.precision ? LX.round( val, options.precision ) : val;
-
-            innerSetValue( val );
-
-            // Reset button (default value)
-            if( !skipCallback )
-            {
-                let btn = this.root.querySelector( ".lexcomponentname .lexicon" );
-                if( btn ) btn.style.display = val != innerKnobCircle.iValue ? "block": "none";
-
-                if( !( snapEnabled && !mustSnap ) )
-                {
-                    this._trigger( new LX.IEvent( name, val, e ), callback );
-                    mustSnap = false;
-                }
-            }
-
-        }, { passive: false });
-
-        // Add drag input
-
-        innerKnobCircle.addEventListener( "mousedown", inner_mousedown );
-
-        var that = this;
-
-        function inner_mousedown( e ) {
-
-            if( document.activeElement == innerKnobCircle || options.disabled )
-            {
-                return;
-            }
-
-            var doc = that.root.ownerDocument;
-            doc.addEventListener("mousemove",inner_mousemove);
-            doc.addEventListener("mouseup",inner_mouseup);
-            document.body.classList.add('noevents');
-
-            if( !document.pointerLockElement )
-            {
-                container.requestPointerLock();
-            }
-
-            e.stopImmediatePropagation();
-            e.stopPropagation();
-        }
-
-        function inner_mousemove( e ) {
-
-            let dt = -e.movementY;
-
-            if ( dt != 0 )
-            {
-                let mult = options.step ?? 1;
-                if(e.shiftKey) mult *= 10;
-                else if(e.altKey) mult *= 0.1;
-                let new_value = (innerKnobCircle.value - mult * dt);
-                innerKnobCircle.value = new_value;
-                LX.BaseComponent._dispatchEvent( innerKnobCircle, 'change' );
-            }
-
-            e.stopPropagation();
-            e.preventDefault();
-        }
-
-        function inner_mouseup( e ) {
-
-            var doc = that.root.ownerDocument;
-            doc.removeEventListener( 'mousemove', inner_mousemove );
-            doc.removeEventListener( 'mouseup', inner_mouseup );
-            document.body.classList.remove( 'noevents' );
-
-            // Snap if necessary
-            if( snapEnabled )
-            {
-                mustSnap = true;
-                LX.BaseComponent._dispatchEvent( innerKnobCircle, 'change' );
-            }
-
-            if( document.pointerLockElement )
-            {
-                document.exitPointerLock();
-            }
-        }
-
-        container.appendChild( knobCircle );
-
-        this.root.appendChild( container );
-
-        LX.doAsync( this.onResize.bind( this ) );
-    }
-}
-
-LX.Knob = Knob;
-
-/**
- * @method addKnob
- * @param {String} name Component name
- * @param {Number} value Knob value
- * @param {Number} min Min Knob value
- * @param {Number} max Max Knob value
- * @param {Function} callback Callback function on change
- * @param {*} options:
- * minLabel (String): Label to show as min value
- * maxLabel (String): Label to show as max value
- */
-
-LX.Panel.prototype.addKnob = function( name, value, min, max, callback, options = {} ) {
-    const component = new Knob( name, value, min, max, callback, options );
-    return this._attachComponent( component );
-}