lexgui 0.6.4 → 0.6.6

package/build/components/codeeditor.js

@@ -2097,7 +2097,7 @@ class CodeEditor {
         if( deltaY >= 0 )
         {
             while( deltaY < ( cursorSelections.childElementCount - 1 ) )
-                LX.UTILS.deleteElement( cursorSelections.lastChild );
+                LX.deleteElement( cursorSelections.lastChild );
 
             for(let i = fromY; i <= toY; i++){
 
@@ -2148,7 +2148,7 @@ class CodeEditor {
         else // Selection goes up...
         {
             while( Math.abs( deltaY ) < ( cursorSelections.childElementCount - 1 ) )
-                LX.UTILS.deleteElement( cursorSelections.firstChild );
+                LX.deleteElement( cursorSelections.firstChild );
 
             for( let i = toY; i <= fromY; i++ ){
 
@@ -2837,7 +2837,7 @@ class CodeEditor {
         // Single line
         if( !force )
         {
-            LX.UTILS.deleteElement( this.code.childNodes[ local_line_num ] );
+            LX.deleteElement( this.code.childNodes[ local_line_num ] );
             this.code.insertChildAtIndex( document.createElement( 'pre' ), local_line_num );
         }
 
@@ -3470,7 +3470,7 @@ class CodeEditor {
 
         if( cursor )
         {
-            LX.UTILS.deleteElement( this.selections[ cursor.name ] );
+            LX.deleteElement( this.selections[ cursor.name ] );
             delete this.selections[ cursor.name ];
             delete cursor.selection;
         }
@@ -3478,7 +3478,7 @@ class CodeEditor {
         {
             for( let cursor of this.cursors.children )
             {
-                LX.UTILS.deleteElement( this.selections[ cursor.name ] );
+                LX.deleteElement( this.selections[ cursor.name ] );
                 delete this.selections[ cursor.name ];
                 delete cursor.selection;
             }
@@ -3667,9 +3667,9 @@ class CodeEditor {
 
     removeCursor( cursor ) {
 
-        LX.UTILS.deleteElement( this.selections[ cursor.name ] );
+        LX.deleteElement( this.selections[ cursor.name ] );
         delete this.selections[ cursor.name ];
-        LX.UTILS.deleteElement( cursor );
+        LX.deleteElement( cursor );
     }
 
     resetCursorPos( flag, cursor ) {
@@ -3962,7 +3962,7 @@ class CodeEditor {
         line.appendChild( text );
         text.innerText = char;
         var rect = text.getBoundingClientRect();
-        LX.UTILS.deleteElement( parentContainer );
+        LX.deleteElement( parentContainer );
         const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
@@ -4238,7 +4238,7 @@ class CodeEditor {
 
         else if( this._lastResult )
         {
-            LX.UTILS.deleteElement( this._lastResult.dom );
+            LX.deleteElement( this._lastResult.dom );
             delete this._lastResult;
         }
 
@@ -4261,7 +4261,7 @@ class CodeEditor {
 
         if( this._lastResult )
         {
-            LX.UTILS.deleteElement( this._lastResult.dom );
+            LX.deleteElement( this._lastResult.dom );
             cursorData = this._lastResult.pos;
             delete this._lastResult;
         }

package/build/components/docmaker.js

@@ -0,0 +1,417 @@
+// @jxarco
+
+import { LX } from 'lexgui';
+
+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 CLASS_WORDS = ['uint32_t', 'uint64_t', 'uint8_t'];
+const STATEMENT_WORDS = ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'import', 'from'];
+
+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'];
+const HTML_TAGS = ['html', 'DOCTYPE', 'head', 'meta', 'title', 'link', 'script', 'body', 'style'];
+
+let mainContainer = document.body;
+
+function SET_DOM_TARGET( element )
+{
+    mainContainer = element;
+}
+
+window.SET_DOM_TARGET = SET_DOM_TARGET;
+
+function MAKE_LINE_BREAK()
+{
+    mainContainer.appendChild( document.createElement('br') );
+}
+
+window.MAKE_LINE_BREAK = MAKE_LINE_BREAK;
+
+function MAKE_HEADER( string, type, id )
+{
+    console.assert(string && type);
+    let header = document.createElement(type);
+    header.innerHTML = string;
+    if(id) header.id = id;
+    mainContainer.appendChild( header );
+}
+
+window.MAKE_HEADER = MAKE_HEADER;
+
+function MAKE_PARAGRAPH( string, sup )
+{
+    console.assert(string);
+    let paragraph = document.createElement(sup ? 'sup' : 'p');
+    paragraph.className = "leading-relaxed";
+    paragraph.innerHTML = string;
+    mainContainer.appendChild( paragraph );
+}
+
+window.MAKE_PARAGRAPH = MAKE_PARAGRAPH;
+
+function MAKE_CODE( text, language = "js" )
+{
+    console.assert(text);
+
+    text.replaceAll('<', '&lt;');
+    text.replaceAll('>', '&gt;');
+
+    let highlight = "";
+    let content = "";
+
+    const getHTML = ( h, c ) => {
+        return `<span class="${ h }">${ c }</span>`;
+    };
+
+    for( let i = 0; i < text.length; ++i )
+    {
+        const char = text[ i ];
+        const string = text.substr( i );
+
+        const endLineIdx = string.indexOf( '\n' );        
+        const line = string.substring( 0, endLineIdx > -1 ? endLineIdx : undefined );
+        
+        if( char == '@' )
+        {
+            const str = line.substr( 1 );
+            
+            if ( !( str.indexOf( '@' ) > -1 ) && !( str.indexOf( '[' ) > -1 ) )
+            {
+                continue;
+            }
+
+            let html = null;
+
+            const tagIndex = str.indexOf( '@' );
+            const skipTag = ( str[ tagIndex - 1 ] == '|' );
+
+            // Highlight is specified
+            if( text[ i + 1 ] == '[' )
+            {
+                highlight = str.substr( 1, 3 );
+                content = str.substring( 5, tagIndex );
+
+                if( skipTag )
+                {
+                    const newString = str.substring( 6 + content.length );
+                    const preContent = content;
+                    const postContent = newString.substring( 0, newString.indexOf( '@' ) );
+                    const finalContent = preContent.substring( 0, preContent.length - 1 ) + '@' + postContent;
+                    html = getHTML( highlight, finalContent );
+
+                    const ogContent = preContent + '@' + postContent;
+                    text = text.replace( `@[${ highlight }]${ ogContent }@`, html );
+                }
+                else
+                {
+                    html = getHTML( highlight, content );
+                    text = text.replace( `@[${ highlight }]${ content }@`, html );
+                }
+            }
+            else
+            {
+                content = str.substring( 0, tagIndex );
+                if( skipTag )
+                {
+                    const preContent = str.substring( 0, str.indexOf( '@' ) - 1 );
+                    content = str.substring( preContent.length + 1 );
+                    content = preContent + content.substring( 0, content.substring( 1 ).indexOf( '@' ) + 1 );
+                    text = text.substr( 0, i ) + '@' + content + '@' + text.substr( i + content.length + 3 );
+                }
+
+                if( language == "cpp" && CPP_KEY_WORDS.includes( content ) )
+                {
+                    highlight = "kwd";
+                }
+                else if( language == "js" && JS_KEY_WORDS.includes( content ) )
+                {
+                    highlight = "kwd";
+                }
+                else if( CLASS_WORDS.includes( content ) )
+                {
+                    highlight = "cls";
+                }
+                else if( STATEMENT_WORDS.includes( content ) )
+                {
+                    highlight = "lit";    
+                }
+                else if( HTML_TAGS.includes( content ) )
+                {
+                    highlight = "tag";    
+                }
+                else if( HTML_ATTRIBUTES.includes( content ) )
+                {
+                    highlight = "atn";    
+                }
+                else if( ( content[ 0 ] == '"' && content[ content.length - 1 ] == '"' ) ||
+                        ( content[ 0 ] == "'" && content[ content.length - 1 ] == "'" ) ||
+                        ( content[ 0 ] == "`" && content[ content.length - 1 ] == "`" ) )
+                {
+                    highlight = "str";
+                }
+                else if( parseFloat( content ) != NaN )
+                {
+                    highlight = "dec";    
+                }
+                else
+                {
+                    console.error( "ERROR[Code Parsing]: Unknown highlight type: " + content );
+                    return;
+                }
+
+                html = getHTML( highlight, content );
+                text = text.replace( `@${ content }@`, html );
+            }
+
+            i += ( html.length - 1 );
+        }
+    }
+    
+    let container = document.createElement('div');
+    container.className = "code-container";
+    let pre = document.createElement('pre');
+    let code = document.createElement('code');
+    code.innerHTML = text;
+
+    let button = document.createElement('button');
+    button.title = "Copy code sample";
+    button.appendChild(LX.makeIcon( "Copy" ));
+    button.addEventListener('click', COPY_SNIPPET.bind(this, button));
+    container.appendChild( button );
+
+    pre.appendChild( code );
+    container.appendChild( pre );
+    mainContainer.appendChild( container );
+}
+
+window.MAKE_CODE = MAKE_CODE;
+
+function MAKE_BULLET_LIST( list )
+{
+    console.assert(list && list.length > 0);
+    let ul = document.createElement('ul');
+    for( var el of list ) {
+        let li = document.createElement('li');
+        li.className = "leading-loose";
+        li.innerHTML = el;
+        ul.appendChild( li );
+    }
+    mainContainer.appendChild( ul );
+}
+
+window.MAKE_BULLET_LIST = MAKE_BULLET_LIST;
+
+function ADD_CODE_LIST_ITEM( item, target )
+{
+    target = target ?? window.listQueued;
+    let split = (item.constructor === Array);
+    if( split && item[0].constructor === Array ) {
+        MAKE_CODE_BULLET_LIST( item, target );
+        return;
+    }
+    let li = document.createElement('li');
+    li.className = "leading-loose";
+    li.innerHTML = split ? ( item.length == 2 ? INLINE_CODE( item[0] ) + ": " + item[1] : INLINE_CODE( item[0] + " <span class='desc'>(" + item[1] + ")</span>" ) + ": " + item[2] ) : INLINE_CODE( item );
+    target.appendChild( li );
+}
+
+window.ADD_CODE_LIST_ITEM = ADD_CODE_LIST_ITEM;
+
+function MAKE_CLASS_METHOD( name, desc, params, ret )
+{
+    START_CODE_BULLET_LIST();
+    let paramsHTML = "";    
+    for( var p of params ) {
+        const name = p[ 0 ];
+        const type = p[ 1 ];
+        paramsHTML += name + ": <span class='desc'>" + type + "</span>" + ( params.indexOf( p ) != (params.length - 1) ? ', ' : '' );
+    }
+    let li = document.createElement('li');
+    li.innerHTML = INLINE_CODE( "<span class='method'>" + name + " (" + paramsHTML + ")" + ( ret ? (": " + ret) : "" ) + "</span>" );
+    window.listQueued.appendChild( li );
+    END_CODE_BULLET_LIST();
+    MAKE_PARAGRAPH( desc );
+}
+
+window.MAKE_CLASS_METHOD = MAKE_CLASS_METHOD;
+
+function MAKE_CLASS_CONSTRUCTOR( name, params, language = "js" )
+{
+    let paramsHTML = "";    
+    for( var p of params ) {
+        const str1 = p[ 0 ]; // cpp: param          js: name
+        const str2 = p[ 1 ]; // cpp: defaultValue   js: type
+        if( language == "cpp" ) {
+            paramsHTML += str1 + ( str2 ? " = <span class='desc'>" + str2 + "</span>" : "" ) + ( params.indexOf( p ) != (params.length - 1) ? ', ' : '' );
+        } else if( language == "js" ) {
+            paramsHTML += str1 + ": <span class='desc'>" + str2 + "</span>" + ( params.indexOf( p ) != (params.length - 1) ? ', ' : '' );
+        }
+    }
+    let pr = document.createElement('p');
+    pr.innerHTML = INLINE_CODE( "<span class='constructor'>" + name + "(" + paramsHTML + ")" + "</span>" );
+    mainContainer.appendChild( pr );
+}
+
+window.MAKE_CLASS_CONSTRUCTOR = MAKE_CLASS_CONSTRUCTOR;
+
+function MAKE_CODE_BULLET_LIST( list, target )
+{
+    console.assert(list && list.length > 0);
+    let ul = document.createElement('ul');
+    for( var el of list ) {
+        ADD_CODE_LIST_ITEM( el, ul );
+    }
+    if( target ) {
+        target.appendChild( ul );
+    } else {
+        mainContainer.appendChild( ul );
+    }
+}
+
+window.MAKE_CODE_BULLET_LIST = MAKE_CODE_BULLET_LIST;
+
+function START_CODE_BULLET_LIST()
+{
+    let ul = document.createElement('ul');
+    window.listQueued = ul;
+}
+
+window.START_CODE_BULLET_LIST = START_CODE_BULLET_LIST;
+
+function END_CODE_BULLET_LIST()
+{
+    console.assert( window.listQueued );
+    mainContainer.appendChild( window.listQueued );
+    window.listQueued = undefined;
+}
+
+window.END_CODE_BULLET_LIST = END_CODE_BULLET_LIST;
+
+function INLINE_LINK( string, href )
+{
+    console.assert(string && href);
+    return `<a href="` + href + `">` + string + `</a>`;
+}
+
+window.INLINE_LINK = INLINE_LINK;
+
+function INLINE_PAGE( string, page )
+{
+    console.assert(string && page);
+    return `<a onclick="loadPage('` + page + `')">` + string + `</a>`;
+}
+
+window.INLINE_PAGE = INLINE_PAGE;
+
+function INLINE_CODE( string, codeClass )
+{
+    console.assert(string);
+    return `<code class="inline ${ codeClass ?? "" }">` + string + `</code>`;
+}
+
+window.INLINE_CODE = INLINE_CODE;
+
+function COPY_SNIPPET( b )
+{
+    b.innerHTML = "";
+    b.appendChild(LX.makeIcon( "Check" ));
+    b.classList.add('copied');
+
+    setTimeout( () => {
+        b.innerHTML = "";
+        b.appendChild(LX.makeIcon( "Copy" ));
+        b.classList.remove('copied');
+    }, 2000 );
+
+    navigator.clipboard.writeText( b.dataset['snippet'] ?? b.parentElement.innerText );
+    console.log("Copied!");
+}
+
+function INSERT_IMAGE( src, caption = "", parent )
+{
+    let img = document.createElement('img');
+    img.src = src;
+    img.alt = caption;
+    img.className = "my-1";
+    ( parent ?? mainContainer ).appendChild( img );
+}
+
+window.INSERT_IMAGE = INSERT_IMAGE;
+
+function INSERT_IMAGES( sources, captions = [], width, height )
+{
+    const mobile = navigator && /Android|iPhone/i.test(navigator.userAgent);
+
+    if( !mobile )
+    {
+        let div = document.createElement('div');
+        div.style.width = width ?? "auto";
+        div.style.height = height ?? "256px";
+        div.className = "flex flex-row justify-center";
+
+        for( let i = 0; i < sources.length; ++i )
+        {
+            INSERT_IMAGE( sources[ i ], captions[ i ], div );
+        }
+
+        mainContainer.appendChild( div );
+    }
+    else
+    {
+        for( let i = 0; i < sources.length; ++i )
+        {
+            INSERT_IMAGE( sources[ i ], captions[ i ] );
+        }
+    }
+}
+
+window.INSERT_IMAGES = INSERT_IMAGES;
+
+function INSERT_VIDEO( src, caption = "", controls = true, autoplay = false )
+{
+    let video = document.createElement( 'video' );
+    video.src = src;
+    video.controls = controls;
+    video.autoplay = autoplay;
+    if( autoplay )
+    {
+        video.muted = true;
+    }
+    video.loop = true;
+    video.alt = caption;
+    mainContainer.appendChild( video  );
+}
+
+window.INSERT_VIDEO = INSERT_VIDEO;
+
+function MAKE_NOTE( string, title = "Note" )
+{
+    console.assert( string );
+
+    let note = document.createElement( 'div' );
+    note.className = "note";
+
+    let header = document.createElement( 'div' );
+    header.className = "note-header";
+    header.appendChild( LX.makeIcon( "NotepadText" ) );
+    header.innerHTML += "<b>" + title + "</b>";
+
+    let body = document.createElement( 'div' );
+    body.className = "note-body";
+    body.innerHTML = string;
+
+    note.appendChild( header );
+    note.appendChild( body );
+    mainContainer.appendChild( note );
+}
+
+window.MAKE_NOTE = MAKE_NOTE;
+
+export { SET_DOM_TARGET, MAKE_LINE_BREAK, MAKE_HEADER, MAKE_PARAGRAPH, MAKE_CODE, MAKE_BULLET_LIST,
+    MAKE_CLASS_METHOD, MAKE_CLASS_CONSTRUCTOR, MAKE_CODE_BULLET_LIST, START_CODE_BULLET_LIST, ADD_CODE_LIST_ITEM,
+    END_CODE_BULLET_LIST, INLINE_LINK, INLINE_PAGE, INLINE_CODE, INSERT_IMAGE, INSERT_IMAGES, INSERT_VIDEO, MAKE_NOTE
+}

package/build/components/nodegraph.js

@@ -393,7 +393,7 @@ class GraphEditor {
 
         this.clear();
 
-        graph.id = graph.id ?? graph.constructor.name  + '-' + LX.UTILS.uidGenerator();
+        graph.id = graph.id ?? graph.constructor.name  + '-' + LX.guidGenerator();
 
         this.graphs[ graph.id ] = graph;
 
@@ -730,7 +730,7 @@ class GraphEditor {
         //     {
         //         var panel = new LX.Panel();
 
-        //         p.signal = "@" + LX.UTILS.uidGenerator() + node.title;
+        //         p.signal = "@" + LX.guidGenerator() + node.title;
 
         //         switch( p.type )
         //         {
@@ -862,7 +862,7 @@ class GraphEditor {
 
         this._addNodeIOEvents( nodeContainer );
 
-        const id = node.id ?? node.title.toLowerCase().replaceAll( /\s/g, '-' ) + '-' + LX.UTILS.uidGenerator();
+        const id = node.id ?? node.title.toLowerCase().replaceAll( /\s/g, '-' ) + '-' + LX.guidGenerator();
         this.nodes[ id ] = { data: node, dom: nodeContainer };
 
         node.id = id;
@@ -1035,7 +1035,7 @@ class GraphEditor {
                     if( !this._onLink( e ) )
                     {
                         // Delete entire SVG if not a successful connection..
-                        LX.UTILS.deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
+                        LX.deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
                     }
 
                     delete this._generatingLink;
@@ -1272,7 +1272,7 @@ class GraphEditor {
             return;
         }
 
-        LX.UTILS.deleteElement( el );
+        LX.deleteElement( el );
 
         // Delete from the editor
 
@@ -1302,7 +1302,7 @@ class GraphEditor {
             {
                 var link = this.currentGraph.links[ key ][ i ];
 
-                LX.UTILS.deleteElement( link.path.parentElement );
+                LX.deleteElement( link.path.parentElement );
 
                 const targetNodeId = targetIsInput ? link.inputNode : link.outputNode;
 
@@ -1344,7 +1344,7 @@ class GraphEditor {
     _deleteGroup( groupId ) {
 
         const dom = this.groups[ groupId ];
-        LX.UTILS.deleteElement( dom );
+        LX.deleteElement( dom );
 
         // Delete from the editor
 
@@ -1428,7 +1428,7 @@ class GraphEditor {
             var links = this._getLinks( targetId, nodeId );
 
             var linkIdx = links.findIndex( i => ( i.inputIdx == srcIndex && i.outputIdx == targetIndex ) );
-            LX.UTILS.deleteElement( links[ linkIdx ].path.parentElement );
+            LX.deleteElement( links[ linkIdx ].path.parentElement );
             links.splice( linkIdx, 1 );
 
             // Input has no longer any connected link
@@ -1478,7 +1478,7 @@ class GraphEditor {
                     var links = this._getLinks( nodeId, targetId );
 
                     var linkIdx = links.findIndex( i => ( i.inputIdx == targetIndex && i.outputIdx == srcIndex ) );
-                    LX.UTILS.deleteElement( links[ linkIdx ].path.parentElement );
+                    LX.deleteElement( links[ linkIdx ].path.parentElement );
                     links.splice( linkIdx, 1 );
 
                     // Remove a connection from the output connections
@@ -1674,7 +1674,7 @@ class GraphEditor {
             const linkInfo = Object.assign( { }, this._generatingLink );
 
             // Delete old link
-            LX.UTILS.deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
+            LX.deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
             delete this._generatingLink;
 
             // Open contextmenu to auto-connect something..
@@ -1688,7 +1688,7 @@ class GraphEditor {
 
             this._selectNodesInBox( this._boxSelecting, this._mousePosition, e.altKey );
 
-            LX.UTILS.deleteElement( this._currentBoxSelectionSVG );
+            LX.deleteElement( this._currentBoxSelectionSVG );
 
             delete this._currentBoxSelectionSVG;
             delete this._boxSelecting;
@@ -2526,7 +2526,7 @@ class GraphEditor {
             return;
         }
 
-        const group_id = bb ? bb.id : "group-" + LX.UTILS.uidGenerator();
+        const group_id = bb ? bb.id : "group-" + LX.guidGenerator();
 
         let groupDOM = document.createElement( 'div' );
         groupDOM.id = group_id;