x4js 2.0.13 → 2.0.15

package/lib/src/core/component.ts

@@ -14,7 +14,7 @@
  * 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 } from './core_tools';
+import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym, IRect } from './core_tools';
 import { CoreElement } from './core_element';
 import { ariaValues, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
@@ -25,6 +25,7 @@ interface RefType<T extends Component> {
 }
 
 type ComponentAttributes = Record<string,string|number|boolean>;
+type CreateComponentCallBack =  ( attrs: Record<string,string> ) => ComponentContent;
 
 const FRAGMENT = Symbol( "fragment" );
 const COMPONENT = Symbol( "component" );
@@ -41,14 +42,18 @@ const RE_NUMBER = /^-?\d+(\.\d*)?$/;
  * to your class to avoid autogenerated css class names conflicts
  */
 
-function genClassNames( x: any ) {
+function genClassNames( x: any ): string[] {
 	
-	let classes = [];
+	const classes = [];
 	let self = Object.getPrototypeOf(x);
 
+	if( self.constructor==Component ) {
+		return ["x4-comp"];
+	}
+
 	while (self && self.constructor !== Component ) {
 		const clsname:string = self.constructor.name;
-		const clsns: string = self.constructor.hasOwnProperty(x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
+		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
 		classes.push( clsns+clsname.toLowerCase() );
 		self = Object.getPrototypeOf(self);
 	}
@@ -60,7 +65,7 @@ function genClassNames( x: any ) {
  * 
  */
 
-export type ComponentContent = Component | string | UnsafeHtml | number | boolean | Component[];
+export type ComponentContent = Component | Component[] | string | string[] | UnsafeHtml| UnsafeHtml[] | number | boolean;
 
 let gen_id = 1000;
 
@@ -89,6 +94,7 @@ export interface ComponentProps {
 	height?: string | number;
 	disabled?: true,
 	hidden?: true,
+	flex?: boolean | number;
 
 	tooltip?: string;
 
@@ -129,7 +135,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	readonly props: P;
 	protected readonly clsprefix: string;	// internal class name prefix (x4 internal)
 
-	private store: Map<string|Symbol,any>;
+	#store: Map<string|symbol,any>;
 
 	constructor( props: P ) {
 		super( );
@@ -159,6 +165,15 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				this.show( false );
 			}
 
+			if( props.flex===true ) {
+				this.addClass( "x4flex" );
+			}
+			else if( props.flex!==undefined ) {
+				this.setStyle( {
+					"flexGrow": props.flex+""
+				});
+			}
+
 			if( props.id!==undefined ) {
 				this.setAttribute( "id", props.id );
 			}
@@ -220,8 +235,9 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	addClass( cls: string ) {
 		if( !cls ) return;
-		
+				
 		if( cls.indexOf(' ')>=0 ) {
+			cls = cls.trim( );
 			const ccs = cls.split( " " );
 			this.dom.classList.add(...ccs);
 		}
@@ -231,11 +247,16 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	}
 
 	/**
-	 * 
+	 * special case: '*' mean clear class list
 	 */
 
 	removeClass( cls: string ) {
 		if( !cls ) return;
+
+		if( cls=='*' ) {
+			this.dom.classList.value = "";
+			return;
+		}
 		
 		if( cls.indexOf(' ')>=0 ) {
 			const ccs = cls.split( " " );
@@ -283,9 +304,10 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	setClass( cls: string, set: boolean = true ) {
+	setClass( cls: string, set: boolean = true ) : this {
 		if( set ) this.addClass(cls);
 		else this.removeClass( cls );
+		return this;
 	}
 
 	// :: ATTRIBUTES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -294,12 +316,11 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * attributes
 	 */
 
-	setAttributes( attrs: ComponentAttributes ) {
-		
+	setAttributes( attrs: ComponentAttributes ): this {
 		for( const name in attrs ) {
-			const value = attrs[name];
-			this.setAttribute( name, value );
+			this.setAttribute( name, attrs[name] );
 		}
+		return this;
 	}
 
 	/**
@@ -331,6 +352,18 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return this.getAttribute( "data-"+name );
 	}
 
+	/**
+	 * @returns undefined if not a number
+	 */
+	getIntData( name: string ) : number {
+		const v = parseInt( this.getAttribute( "data-"+name ) );
+		if( Number.isFinite(v) ) {
+			return v;
+		}
+
+		return undefined;
+	}
+
 	/**
 	 * 
 	 */
@@ -343,17 +376,17 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * idem as setData but onot on dom, you can store anything 
 	 */
 
-	setInternalData( name: string|Symbol, value: any ): this {
-		if( !this.store ) {
-			this.store = new Map( );
+	setInternalData( name: string|symbol, value: any ): this {
+		if( !this.#store ) {
+			this.#store = new Map( );
 		}
 
-		this.store.set( name, value );
+		this.#store.set( name, value );
 		return this;
 	}
 
-	getInternalData( name: string|Symbol ): any {
-		return this.store?.get(name);
+	getInternalData( name: string|symbol ): any {
+		return this.#store?.get(name);
 	}
 
 	
@@ -387,7 +420,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	protected mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
 		const p = props as any;
 		elements.forEach( n => {
-			if (p.hasOwnProperty(n) ) {
+			if (Object.prototype.hasOwnProperty.call(p,n) && p[n]) {
 				this.on( n, p[n] );
 			}
 		});
@@ -465,17 +498,15 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	prependContent( content: ComponentContent ) {
 		const d = this.dom;
-
 		const set = ( c: Component | string | UnsafeHtml | number | boolean ) => {
 			if (c instanceof Component ) {
-				d.insertBefore( d.firstChild, c.dom );
+				d.insertAdjacentElement( 'afterbegin', c.dom );
 			}
 			else if( c instanceof UnsafeHtml) {
-				d.insertAdjacentHTML( 'beforebegin', c.toString() );
+				d.insertAdjacentHTML( 'afterbegin', c.toString() );
 			}
 			else if (typeof c === "string" || typeof c === "number") {
-				const tnode = document.createTextNode(c.toString());
-				d.insertBefore( d.firstChild, tnode );
+				d.insertAdjacentText( 'afterbegin', c.toString() );
 			}
 			else {
 				console.warn("Unknown type to append: ", c);
@@ -512,7 +543,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	queryAll( selector: string ): Component[] {
 		const all = this.dom.querySelectorAll( selector );
 		const rc = new Array( all.length );
-		all.forEach( (x,i) => rc[i]=componentFromDOM(x) );
+		all.forEach( (x,i) => rc[i]=wrapDOM(x as HTMLElement) );
 		return rc;
 	}
 
@@ -525,6 +556,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return componentFromDOM<T>(r);
 	}
 
+
 	// :: STYLES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 	
@@ -657,8 +689,13 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	focus( ) {
+	focus( ): this {
 		(this.dom as HTMLElement).focus( );
+		return this;
+	}
+
+	hasFocus( ) {
+		return document.activeElement==this.dom;
 	}
 
 	/**
@@ -681,40 +718,49 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	show( vis = true ) {
+	show( vis = true ): this {
 		this.setClass( 'x4hidden', !vis );
+		return this;
 	}
 
 	/**
 	 * 
 	 */
 
-	hide( ) {
+	hide( ): this {
 		this.show( false );
+		return this;
 	}
 
 	/**
 	 * enable or disable a component (all sub HTMLElement will be also disabled)
 	 */
 
-	enable( ena = true ) {
-		this.setAttribute( "disabled", !ena );
+	enable( ena = true ): this {
+		this.setAttribute( "disabled", !ena ? 'true' : null );
+
+		if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
+			this.dom.disabled = !ena;
+		}
 
 		// propagate diable state to all input children
 		const nodes = this.enumChildNodes( true );
 		nodes.forEach( x => {
-			if( x instanceof HTMLInputElement ) {
+			if( x instanceof HTMLInputElement || x instanceof HTMLButtonElement ) {
 				x.disabled = !ena;
 			}
 		});
+
+		return this;
 	}
 
 	/**
 	 * 
 	 */
 
-	disable( ) {
+	disable( ): this {
 		this.enable( false );
+		return this;
 	}
 
 	/**
@@ -749,10 +795,17 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 
 	parentElement<T extends Component>( cls?: Constructor<T> ): T {
-		let p = this.dom;
+		return Component.parentElement<T>( this.dom, cls );	
+	}
+
+	/**
+	 * search for parent that match the given contructor 
+	 */
+	
+	static parentElement<T extends Component>( dom: Node, cls?: Constructor<T> ): T {
 
-		while( p.parentElement ) {
-			const cp = componentFromDOM( p.parentElement );
+		while( dom.parentElement ) {
+			const cp = componentFromDOM( dom.parentElement );
 			if( !cls ) {
 				return cp as T;
 			}
@@ -761,7 +814,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				return cp;
 			}
 
-			p = p.parentElement;
+			dom = dom.parentElement;
 		}
 
 		return null;
@@ -793,7 +846,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	enumChildComponents( recursive: boolean ) {
 
-		let children: Component[] = [];
+		const children: Component[] = [];
 		
 		const nodes = this.enumChildNodes( recursive );
 		nodes.forEach( ( c: Node ) => {
@@ -811,7 +864,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 
 	enumChildNodes( recursive: boolean ) {
-		let children: Node[] = Array.from( recursive ? this.dom.querySelectorAll( '*' ) : this.dom.children );
+		const children: Node[] = Array.from( recursive ? this.dom.querySelectorAll( '*' ) : this.dom.children );
 		return children;
 	}
 
@@ -830,7 +883,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * called by the compiler when a jsx element is seen
 	 */
 
-	static createElement( clsOrTag: string | ComponentConstructor | Symbol | Function, attrs: any, ...children: Component[] ): Component | Component[] {
+	static createElement( clsOrTag: string | ComponentConstructor | symbol | CreateComponentCallBack, attrs: any, ...children: Component[] ): Component | Component[] {
 
 		let comp: Component;
 
@@ -875,7 +928,11 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	// :: SPECIALS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 	/**
+	 * system interfaces:
+	 * 	"form-element"
+	 * 	"tab-handler"
 	 * 
+	 * each app can create it's own interface
 	 */
 
 	queryInterface<T>( name: string ): T {
@@ -923,6 +980,13 @@ export class Flex extends Component {
 	}
 }
 
+// just a spacer element that push other
+export class Space extends Component {
+	constructor( width?: number|string, cls?: string ) {
+		super( { width, cls } )
+	}
+}
+
 
 // :: HIGH LEVEL BASIC EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
@@ -945,6 +1009,14 @@ export interface EvChange extends ComponentEvent {
 	readonly value: any;
 }
 
+/**
+ * Focus event
+ */
+
+export interface EvFocus extends ComponentEvent {
+	readonly focus_out: boolean;
+}
+
 /**
  * Selection Event
  * value is the new selection or null
@@ -955,6 +1027,7 @@ interface ISelection {
 
 export interface EvSelectionChange extends ComponentEvent {
 	readonly selection: ISelection;
+	readonly empty: boolean;
 }
 
 

package/lib/src/core/core_application.ts

@@ -14,31 +14,252 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component } from './component.js';
+import { Component, componentFromDOM } from './component.js';
 import { CoreElement } from './core_element.js';
-import { EventMap } from './core_events';
+import { CoreEvent, EventMap } from './core_events';
+import { getFocusableElements, ITabHandler } from './core_tools.js';
 
+const socket_sent = Symbol( 'socket' );
+
+
+export interface EvMessage extends CoreEvent {
+	msg: string;
+	params: any;
+}
 
 export interface ApplicationEvents extends EventMap {
+	global: EvMessage;
+	message: EvMessage;
 }
 
 // signleton
 let main_app: Application = null;
 
+
+
+class Process {
+
+	/**
+	 * can be use to see if we have some tactile input
+	 * @returns max touch point count
+	 */
+
+	getMaxTouchPoints( ) {
+		return navigator.maxTouchPoints;
+	}
+}
+
+
+
 export class Application<E extends ApplicationEvents = ApplicationEvents> extends CoreElement<E> {
 
+	private env = new Map<string,any>( );
+	private mainview: Component;
+	
+	static readonly process = new Process( );
+
 	constructor( ) {
 		super( );
 
 		console.assert( main_app==null, "Application must be a singleton." );
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		main_app = this;
 	}
 
 	setMainView( view: Component ) {
+		this.mainview = view;
 		document.body.appendChild( view.dom );
+		this._setupKeyboard( );
 	}
 
 	static instance<P extends Application = Application>( ): P {
 		return main_app as P;
 	}
+
+	/**
+	 * 
+	 */
+
+	getMainView( ) {
+		return this.mainview;
+	}
+
+	/**
+	 * 
+	 */
+
+	setEnv( name: string, value: any ) {
+		this.env.set( name, value );
+	}
+
+	/**
+	 * 
+	 */
+	
+	getEnv( name: string, def_value?: any ) {
+		return this.env.get( name ) ?? def_value;
+	}
+
+	/**
+	 * small shortcut for Application.instance().fire( "global", ... );
+	 */
+	
+	static fireGlobal( msg: string, params?: any ) {
+		Application.instance().fire( "global", { msg, params } );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _setupKeyboard( ) {
+		
+		document.addEventListener( "keydown", (ev) => {
+			if( ev.key=="Tab" || ev.key=="Enter" ) {
+				if( this.focusNext( !ev.shiftKey ) ) {
+					ev.preventDefault( );
+				}
+			}
+		} );
+	}
+
+	focusNext( next: boolean ) {
+		let act = document.activeElement;
+		let topmost: HTMLElement;
+
+		while( act!=document.body ) {
+			const comp = componentFromDOM(act);
+			const ifx = comp.queryInterface( "tab-handler") as ITabHandler;
+
+			if( ifx ) {
+				return ifx.focusNext( next );
+			}
+
+			if( act.classList.contains("x4box") ) {	// todo: that is too dirty
+				topmost = act as HTMLElement;
+			}
+
+			act = act.parentElement;
+		}
+
+		if( topmost ) {
+			const focusable = getFocusableElements( topmost );
+			if( !focusable.length ) {
+				return true;
+			}
+			else {
+				const first = focusable[0];
+				const last  = focusable[focusable.length - 1];
+				
+				let newf: HTMLElement;
+				if (!next && document.activeElement === first) {
+					newf = last as HTMLElement;
+				}
+				else if (next && document.activeElement === last) {
+					newf = first as HTMLElement;
+				}
+
+				if( newf ) {
+					newf.focus(); 
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+
+
+	/**
+	 * 
+	 */
+
+	setupSocketMessaging( path?: string, looseCallback?: ( ) => void ) {
+		
+		const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+		const address = path ? protocol+path : `${protocol}${window.location.hostname}:${window.location.port}/ws`;	
+
+		let opened = 0;
+		let msg_socket:WebSocket = null;
+
+		// we trap all 'global' messages send via application
+		// then we send them on websocket
+		
+		this.on( 'global', ( e: EvMessage ) => {
+			if( Object.prototype.hasOwnProperty.call( e, socket_sent) ) {
+				return;
+			}
+
+			if( msg_socket ) {
+				msg_socket.send( JSON.stringify( {
+					msg: e.msg,
+					params: e.params,
+				} ) );
+			}
+		});
+
+		msg_socket = new WebSocket(address, 'messaging' );
+
+		msg_socket.onopen = ( ) => {
+			console.log( 'websocket opened' );
+			opened = 1;
+		}
+
+		// receive a message
+		msg_socket.onmessage = ( e ) => {
+			if( e.data!='ping' ) {
+				const message = JSON.parse(e.data);
+				message[socket_sent] = true;
+				this.fire( 'global', message );
+			}
+		}
+
+		// loose socket
+		msg_socket.onclose = ( ev ) => {
+			console.log( 'websocket closed:', ev );
+			msg_socket = null;
+
+			if( opened ) {
+				looseCallback( );
+				opened = 0;
+			}
+		}
+
+		//msg_socket.onerror = (ev )=> {
+		//	console.log( 'websocket error:', ev );
+		//}
+	}
+
+	/**
+	 * get a local storage value
+	 * @param name name of the value
+	 * @returns the value (string) or undefined
+	 */
+
+	getStorage( name: string ) : string {
+		return localStorage.getItem( name );
+	}
+
+	getStorageJSON( name: string ) : any {
+		try {
+			return JSON.parse( localStorage.getItem( name ) );
+		}
+		catch( e ) {
+			return undefined;
+		}
+	}
+
+	/**
+	 * change a loclastorage value
+	 * @param name name of the value
+	 * @param value the value to store
+	 */
+
+	setStorage( name: string, value: string | number ) {
+		localStorage.setItem( name, value+'' );
+	}
+
+	setStorageJSON( name: string, value: any ) {
+		localStorage.setItem( name, JSON.stringify( value ) );
+	}
 }

package/lib/src/core/core_colors.ts

@@ -178,7 +178,7 @@ export class Color {
 
 
 	setRgb( r: number, g: number, b: number, a: number ): this {
-		this.rgb = [clamp(r,0,255),clamp(g,0,255),clamp(b,0,255),clamp(a,0,1)];
+		this.rgb = [clamp(r|0,0,255),clamp(g|0,0,255),clamp(b|0,0,255),clamp(a,0,1)];
 		return this;
 	}
 
@@ -189,7 +189,7 @@ export class Color {
 
 	toHexString( ): string {
 		const _ = this.rgb;
-		return _[3]==1 ? `#(${hx(_[0])},${hx(_[1])},${hx(_[2])})` : `rgba(${hx(_[0])},${hx(_[1])},${hx(_[2])},${hx(_[3]*255)})`
+		return _[3]==1 ? `#${hx(_[0])}${hx(_[1])}${hx(_[2])}` : `#${hx(_[0])}${hx(_[1])}${hx(_[2])}${(hx((_[3]*255)|0))}`
 	}
 
 	toRgb( ): Rgb {