x4js 2.0.13 → 2.0.14

package/lib/src/core/core_application.ts

@@ -14,19 +14,50 @@
  * 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( );
 
@@ -35,10 +66,199 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 	}
 
 	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( e.hasOwnProperty(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 {