x4js 2.2.47 → 2.2.50

package/src/core/component.ts

@@ -14,11 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym, IRect } from './core_tools';
+import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym } from './core_tools';
 import { CoreElement } from './core_element';
 import { AriaAttributes, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
-import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom';
+import { addEvent, DOMEventHandler, GlobalDOMEvents, COMPONENT } from './core_dom';
 import { Application, EvMessage } from './core_application';
 import { makeState } from './core_state.js';
 
@@ -30,7 +30,6 @@ type ComponentAttributes = Record<string,string|number|boolean>;
 type CreateComponentCallBack =  ( attrs: Record<string,string> ) => ComponentContent;
 
 const FRAGMENT = Symbol( "fragment" );
-const COMPONENT = Symbol( "component" );
 
 const RE_NUMBER = /^-?\d+(\.\d*)?$/;
 
@@ -152,7 +151,7 @@ export interface ComponentEvents extends EventMap {
  * ```
  */
 
-@class_ns( "x4" )
+@class_ns("x4")
 export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> 
 		extends CoreElement<E> {
 
@@ -166,16 +165,16 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	#store: Map<string|symbol,any>;
 	#pstate: any;
-	
-	constructor( props: P ) {
+
+	constructor(props: P) {
 		super( );
 
 		this.props = props;	// copy ?
 
 		if( props.existingDOM ) {
 			this.dom = props.existingDOM;
-		}
-		else {
+							}
+							else {
 			if( props.ns ) {
 				this.dom = document.createElementNS( props.ns, props.tag ?? "div" );
 			}
@@ -242,8 +241,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				this.addDOMEvent( "created", ( ) => {
 					this.enable( false );
 				} );
+				}
 			}
-		}
 
 		(this.dom as any)[COMPONENT] = this;
 	}
@@ -281,10 +280,10 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * Multiple classes can be provided as a space-separated string.
      * @param cls - The CSS class(es) to add.
      */
-    
+
 	addClass( cls: string ) {
 		if( !cls ) return;
-			
+		
 		cls = cls.trim( );
 			
 		if( cls.includes(' ') ) {
@@ -309,13 +308,13 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		if( cls=='*' ) {
 			this.dom.classList.value = "";
 			return;
-		}
+			}
 		
 		if( cls.indexOf(' ')>=0 ) {
 			const ccs = cls.split( " " );
 			this.dom.classList.remove(...ccs);
-		}
-		else {
+			}
+			else {
 			this.dom.classList.remove(cls);
 		}
 	}
@@ -351,11 +350,11 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		if( cls.indexOf(' ')>=0 ) {
 			const ccs = cls.split( " " );
 			ccs.forEach( toggle );
-		}
-		else {
+				}
+				else {
 			toggle( cls );
 		}
-	}
+				}
 
 	/**
      * Sets or removes a CSS class based on a boolean condition.
@@ -368,7 +367,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		if( set ) this.addClass(cls);
 		else this.removeClass( cls );
 		return this;
-	}
+			}
 
 	// :: ATTRIBUTES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
@@ -383,7 +382,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 			this.setAttribute( name, attrs[name] );
 		}
 		return this;
-	}
+			}
 
 	/**
      * Sets a single HTML attribute on the component's DOM element.
@@ -399,7 +398,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		else {
 			this.dom.setAttribute( name, ""+value );
 		}
-	}
+		}
 
 	/**
      * Retrieves the value of an HTML attribute from the component's DOM element.
@@ -416,10 +415,12 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @param name - The suffix of the `data-` attribute (e.g., for `data-foo`, use `"foo"`).
      * @returns The string value of the `data-*` attribute, or `null` if not present.
 	 * 
-	 * @cf Component.setIntData, Component.getIntData (number)
-	 * @cf Component.setInternalData, Component.getInternalData (typed data)
-     */
-    
+	 * @see Component.setIntData
+	 * @see Component.getIntData
+	 * @see Component.setInternalData
+	 * @see Component.getInternalData
+	 */
+
 	getData( name: string ) : string {
 		return this.getAttribute( "data-"+name );
 	}
@@ -536,7 +537,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * Appends content to the end of the component's DOM element.
      * Content can be a single Component, an array of Components, a string, an array of strings,
      * raw HTML, an array of raw HTML, a number, or a boolean.
-	 * @note
+	 * @remarks
 	 * for simplicity, null is also allowed:
 	 * setContent( [
 	 * 	optional ? myControl : null,
@@ -629,7 +630,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Removes a specific child component from this component's DOM element.
      * @param child - The child component instance to remove.
-	 * @cf clearContent
+	 * @see clearContent
      */
 
 	removeChild( child: Component ) {
@@ -792,8 +793,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Sets pointer capture on the component's DOM element for a specific pointer.
      * @param pointerId - The unique ID of the pointer.
-	 *
-	 * @ex
+	 * 
+	 * @example
 	 * control.on("pointerdown", (ev) => {
 	 * 	ev.preventDefault(); // Prevent default browser actions
 	 * 	control.setCapture(ev.pointerId);
@@ -856,7 +857,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Checks if the component's DOM element is currently visible (i.e., not hidden by `display: none`).
      * @returns `true` if the component is visible, `false` otherwise.
-     */
+	 */
 
 	isVisible( ) {
 		return (this.dom as HTMLElement).offsetParent !== null;
@@ -942,7 +943,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Returns the previous sibling element as a Component instance.
      * @returns The previous sibling component, or `null` if none exists.
-     */
+	 */
 
 	prevElement<T extends Component = Component>( ): T {
 		const nxt = this.dom.previousElementSibling;
@@ -960,7 +961,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	}
 
 	/**
-     * 
+	 * 
 	 */
 
 	childCount( ) {
@@ -972,9 +973,9 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @param dom - The starting DOM node from which to search upwards.
      * @param cls - Optional. The constructor of the Component type to match.
      * @returns The matching parent Component instance, or `null` if not found.
-     */
-	
-	
+	 */
+
+
 	static parentElement<T extends Component>( dom: Node, cls?: Constructor<T> ): T {
 
 		while( dom.parentElement ) {
@@ -989,14 +990,14 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 			dom = dom.parentElement;
 		}
-
+		
 		return null;
 	}
 
 	/**
      * Returns the first child element as a Component instance.
      * @returns The first child component, or `null` if none exists.
-     */
+	 */
 
 	firstChild<T extends Component = Component>( ) : T {
 		const nxt = this.dom.firstElementChild;
@@ -1006,7 +1007,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Returns the last child element as a Component instance.
      * @returns The last child component, or `null` if none exists.
-     */
+	 */
 
 	lastChild<T extends Component = Component>( ) : T {
 		const nxt = this.dom.lastElementChild;
@@ -1017,19 +1018,19 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * Enumerates all child components of this component.
      * @param recursive - If `true`, searches all descendants; otherwise, only direct children.
      * @returns An array of child Component instances.
-     */
+	 */
 
 	enumChildComponents( recursive: boolean ) {
-
+	
 		const children: Component[] = [];
-		
+
 		const nodes = this.enumChildNodes( recursive );
 		nodes.forEach( ( c: Node ) => {
 			const cc = componentFromDOM( c as HTMLElement );
 			if( cc ) {
 				children.push(cc);
 			}
-		} );
+				});
 
 		return children;
 	}
@@ -1186,7 +1187,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		state.on( "change", ( ) => {
 			this.setTimeout( key, 500, ( ) => {
 				Application.instance().setStorage( key, JSON.stringify( raw ) );
-			});
+		} );
 		});
 
 		this.#pstate[name] = state;
@@ -1212,7 +1213,7 @@ type ComponentConstructor = {
 
 export function componentFromDOM<T extends Component = Component>( node: Element ) {
 	return node ? (node as any)[COMPONENT] as T : null;
-}
+	}
 
 /**
  * Wraps an existing HTMLElement with a new Component instance.

package/src/core/core_application.ts

@@ -27,9 +27,15 @@ export interface EvMessage extends CoreEvent {
 	params: any;
 }
 
+interface EvWindowResize extends CoreEvent {
+	width: number;
+	height: number;
+}
+
 export interface ApplicationEvents extends EventMap {
 	global: EvMessage;
 	message: EvMessage;
+	resize: EvWindowResize;
 }
 
 // singleton
@@ -104,6 +110,15 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		else {
 			window.addEventListener( "load", loaded, { once: true } );
 		}
+
+		const resize = ( ) => {
+			this.fire( "resize", {
+				width: window.innerWidth,
+				height: window.innerHeight,
+			} );
+		}
+
+		window.addEventListener('resize', resize, { passive: true });
 	}
 
 	/**
@@ -171,10 +186,7 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 	}
 
 	/**
-     * Retrieves an environment variable from the application's environment map.
-     * @param name - The name of the environment variable.
-     * @param def_value - An optional default value to return if the variable is not found.
-     * @returns The value of the environment variable, or `def_value` if not found.
+     * 
      */
 
 	static fireGlobal( msg: string, params?: any ) {

package/src/core/core_data.ts

@@ -602,7 +602,6 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 
 	/**
 	 * 
-	 * @param records 
 	 */
 
 	async load( url?: string ) {
@@ -666,7 +665,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 
 	/**
 	 * 
-	 * @param data 
+	 * @param rec
 	 */
 
 	public appendRaw( rec: T ) {
@@ -1206,8 +1205,6 @@ export class DataView extends CoreElement<DataViewEventMap>
 
 	/**
 	 * 
-	 * @param columns 
-	 * @param ascending 
 	 */
 
 	public sort( props: SortProp[] ) {

package/src/core/core_dom.ts

@@ -14,6 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+export const COMPONENT = Symbol( "component" );
+
 /** @ignore this events must be defined on domNode (do not bubble) */
 export const unbubbleEvents = {
 	mouseleave: 1, mouseenter: 1, load: 1, unload: 1, scroll: 1, focus: 1, blur: 1, rowexit: 1, beforeunload: 1, stop: 1,
@@ -33,9 +35,33 @@ let mutObserver: MutationObserver = null;
 
 const observeMutation = (mutations: MutationRecord[], observer: MutationObserver): void => {
 
+	// moves are handled this way
+	const added   = new Set<Node>( );
+	const removed = new Set<Node>( );
+
+	for( const mutation of mutations ) {
+		if( mutation.type == "childList" ) {
+			mutation.addedNodes.forEach( n => {
+				if( removed.has( n ) ) {
+					removed.delete( n ); 
+				}
+				else { 
+					added.add( n ); 
+				}
+			} );
+
+			mutation.removedNodes.forEach( n => {
+				if( added.has( n ) ) { 
+					added.delete( n ); 
+				}
+				else { 
+					removed.add( n ); 
+				}
+			} );
+		}
+	}
+
 	const sendEvent = ( node: Node, code: "created" | "removed" ) => {
-//		console.log( "notify", node, code );
-			
 		const store = event_handlers.get( node );
 		if ( store && store[code] ) {
 			node.dispatchEvent( new Event( code, {} ) );
@@ -53,26 +79,17 @@ const observeMutation = (mutations: MutationRecord[], observer: MutationObserver
 		}
 
 		if( !create ) {
+			const core = (node as any)[COMPONENT];
+			if( core && core.cleanUp ) {	//<yes: dirty hack
+				core.cleanUp(); 
+			}
+
 			sendEvent( node, "removed" );
 		}
 	}
 
-	
-	for (const mutation of mutations)  {
-		if( mutation.type=="childList" ) {
-			if( mutation.addedNodes ) {
-				mutation.addedNodes.forEach( node => {
-					notify( node, true );
-				} );
-			}
-			
-			if( mutation.removedNodes ) {
-				mutation.removedNodes.forEach( node => {
-					notify( node, false );
-				} );
-			}
-		}
-	}
+	added.forEach( n => { if( n.isConnected ) notify( n, true ); } );
+	removed.forEach( n => { if( !n.isConnected ) notify( n, false ); } );
 }
 
 
@@ -144,17 +161,27 @@ export function dispatchEvent(ev: Event) {
 
 export function addEvent( node: Node, name: string, handler: DOMEventHandler, prepend = false ) {
 
+	if( !mutObserver ) {
+		mutObserver = new MutationObserver( observeMutation )
+		mutObserver.observe( document.body, {childList: true,subtree: true} );
+	}
+	
 	if( name=="removed" || name=="created" ) {
-		if( !mutObserver ) {
-			mutObserver = new MutationObserver( observeMutation )
-			mutObserver.observe( document.body, {childList: true,subtree: true} );
+		const core = (node as any)[COMPONENT];
+		if( core && core.addClass ) {	//<yes: dirty hack
+			core.addClass( "x4:mut")
 		}
 	}
 	else if( name=="resized" ) {
 		if (!sizeObserver) {
 			sizeObserver = new ResizeObserver( observeSize );
 		}
-		
+
+		const core = (node as any)[COMPONENT];
+		if( core && core.addClass ) {	//<yes: dirty hack
+			core.addClass( "x4:sze")
+		}
+
 		sizeObserver.observe( node as Element );
 	}
 
@@ -470,12 +497,3 @@ export interface GlobalDOMEvents {
 	created?: ( ev: Event ) => void;		// occurs when inserted in the dom
 	removed?: ( ev: Event ) => void;		// occurs when removed from dom
 }
-
-
-
-
-
-
-
-
-