x4js 1.5.23 → 1.5.25

package/lib/src/application.ts

@@ -33,6 +33,7 @@ import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base
 import { Component, flyWrap } from './component'
 import { Settings } from './settings'
 import { _tr } from './i18n'
+import { Router } from 'x4js'
 
 const _x4_touch_time = Symbol( );
 
@@ -97,6 +98,8 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 
 	private m_touch_time: number;
 	private m_touch_count: number;
+
+	private m_router: Router;
 	
 	constructor( props : P ) {
 		console.assert( Application.self===null, 'application is a singleton' );
@@ -112,8 +115,9 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 
 		this.m_touch_time = 0;
 		this.m_touch_count = 0;
+		this.m_router = null;
 	
-		(Application.self as any) = this;
+		x4app = (Application.self as any) = this;
 
 		if( 'onload' in globalThis ) {
 			globalThis.addEventListener( 'load', ( ) => {
@@ -129,6 +133,13 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 		this.setTitle( '' );
 	}
 
+	public get router( ) {
+		if( !this.m_router ) {
+			this.m_router = new Router( );
+		}
+		return this.m_router;
+	}
+
 	public get app_name( ) {
 		return this.m_app_name;
 	}
@@ -247,5 +258,5 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	}
 };
 
-
+export let x4app: Application;
 

package/lib/src/component.ts

@@ -174,6 +174,7 @@ interface CInternalProps {
 	dom_events: any;
 	classes: IMap<boolean>;
 	uid: number;
+	created: boolean;
 	inrender: boolean;
 }
 
@@ -891,6 +892,18 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 
 		// notify descendants that we have been created (dom exists)
 
+		const notify = ( c: Component ) => {
+
+			if( !c.m_iprops.created ) {
+				if (c.dom && c.m_iprops.dom_events && c.m_iprops.dom_events.create) {
+					c.dom.dispatchEvent(new Event('create'));
+				}
+		
+				c.componentCreated();
+				c.m_iprops.created = true;
+			}
+		}
+
 		for (let mutation of mutations) {
 
 			if (mutation.type == 'childList') {
@@ -902,24 +915,16 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 
 					if (el) {
 						el.enumChilds((c: Component) => {
-
-							if (c.dom && c.m_iprops.dom_events && c.m_iprops.dom_events.create) {
-								c.dom.dispatchEvent(new Event('create'));
-							}
-
-							c.componentCreated();
-
+							notify( c );
 						}, true);
 
-						if (el.m_iprops.dom_events && el.m_iprops.dom_events.create) {
-							el.dom.dispatchEvent(new Event('create'));
-						}
-
-						el.componentCreated();
+						notify( el );
 					}
 				}
 			}
 		}
+
+		
 	}
 
 	public dispose() {
@@ -953,6 +958,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 		}
 
 		this.componentDisposed();
+		this.m_iprops.created = false;
 		// todo: pb on update this.removeAllListeners( null );
 	}
 

package/lib/src/datastore.ts

@@ -39,7 +39,6 @@ export type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' |
 export type DataIndex = Uint32Array;
 
 interface EvDataChange extends BasicEvent {
-
 	type: string;
 	id: any;
 }
@@ -49,6 +48,8 @@ function EvDataChange( type: 'create' | 'update' | 'delete' | 'data' | 'change',
 }
 
 
+
+
 /**
  * fields definition
  * 	field with index=0 is record id
@@ -553,55 +554,55 @@ interface DataEventMap extends BaseComponentEventMap {
 	change?: EvChange;
 }
 
+type DataSolver = ( data: any ) => Record[];
+
 export interface DataProxyProps extends BaseComponentProps<DataEventMap> {
-	type: 'local' | 'immediate' | 'ajax';
-	path?: string;
-	params?: any;
+	url: string;
+	params?: string[];
+	solver?: DataSolver;
 }
 
 export class DataProxy extends BaseComponent<DataProxyProps,DataEventMap> {
-	
+
 	constructor( props: DataProxyProps ) {
 		super( props );
 	}
 
-	load( ) {
+	load( url?: string ) {
+		if( url ) {
+			this.m_props.url = url;
+		}
+
 		this._refresh( );
 	}	
 
-	save( data ) {
-		if( this.m_props.type=='local' ) {
-			console.assert( false );	// not imp
-			/*
-			const fs = require('fs');
-			fs.writeFileSync( this.m_path, data );
-			*/
-		}
-	}
-
 	private _refresh( delay: number = 0 ) {
 
-		if( this.m_props.type=='local' ) {
-			console.assert( false );	// not imp
-			/*
-			const fs = require('fs');
-			fs.readFile( this.m_path, ( _, bdata ) => {;
-				let data = JSON.parse(bdata);
-				this.emit( 'dataready', data );
-			} );
-			*/
+		const load = async ( ) => {
+
+			let url = this.m_props.url;
+			if( this.m_props.params ) {
+				url += '?' + this.m_props.params.join( '&' );
+			}
+
+			const r = await fetch( url );
+			if( r.ok ) {
+				const raw = await r.json( );
+				
+				let json = raw;
+				if( this.m_props.solver ) {
+					json = this.m_props.solver( json );
+				}
+
+				this.emit( 'change', EvChange(json,raw) );
+			}
+		}
+
+		if( delay ) {
+			setTimeout( load, delay );
 		}
 		else {
-			setTimeout( ( ) => {
-				ajaxRequest( {
-					url: this.m_props.path,
-					method: 'GET',
-					params: this.m_props.params,
-					success: ( data ) => {
-						this.emit( 'change', EvChange(data) );
-					}
-				});
-			}, delay );
+			load( );
 		}
 	}
 }
@@ -650,7 +651,13 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 			this.setRawData( props.data );
 		}
 		else if( props.url ) {
-			this.load( props.url );
+			this.m_proxy = new DataProxy( {
+				url: props.url,
+				solver: props.solver,
+				events: { change: (ev) => { this.setData( ev.value ); } }
+			});
+
+			this.m_proxy.load( );
 		}
 	}
 
@@ -659,27 +666,8 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @param records 
 	 */
 
-	load( url: string ) {
-
-		//todo: that
-		if( url.substr(0,7)==='file://' ) {
-			this.m_proxy = new DataProxy( {
-				type: 'local',
-				path: url.substr( 7 ),
-				events: { change: (ev) => { this.setData( ev.value ); } }
-			});
-	
-			this.m_proxy.load( );
-		}
-		else {
-			this.m_proxy = new DataProxy( {
-				type: 'ajax',
-				path: url,
-				events: { change: (ev) => { this.setData( ev.value ); } }
-			});
-
-			this.m_proxy.load( );
-		}
+	load( url?: string ) {
+		this.m_proxy.load( url );
 	}
 
 	reload( ) {

package/lib/src/drag_manager.ts

@@ -34,7 +34,12 @@ import { Point } from './tools';
 
 const x_drag_cb = Symbol( 'x-drag-cb' );
 
-type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, point: Point ) => void;
+interface DropInfo {
+	pt: Point;
+	data: DataTransfer;
+}
+
+type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
 type FilterCallback = ( el: Component ) => boolean;
 
 /**
@@ -91,10 +96,10 @@ class DragManager {
 	 * 
 	 */
 
-	registerDropTarget(el: Component, cb: DropCallback, filterCB: FilterCallback ) {
+	registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback ) {
 
 		const dragEnter = (ev: DragEvent) => {
-			if( !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
@@ -108,7 +113,7 @@ class DragManager {
 		const dragOver = (ev: DragEvent) => {
 			//console.log( "dragover", ev.target );
 			
-			if( !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
@@ -122,7 +127,12 @@ class DragManager {
 			}
 
 			if( this.dropTarget ) {
-				cb( 'drag', this.dragSource, {x:ev.pageX,y:ev.pageY} );
+				const infos = {
+					pt: new Point( ev.pageX, ev.pageY ),
+					data: ev.dataTransfer,
+				}
+
+				cb( 'drag', this.dragSource, infos );
 			}
 
 			ev.dataTransfer.dropEffect = 'copy';
@@ -135,10 +145,17 @@ class DragManager {
 		};
 
 		const drop = (ev: DragEvent) => {
-			cb('drop', this.dragSource, {x:ev.pageX,y:ev.pageY} );
+			const infos = {
+				pt: new Point( ev.pageX, ev.pageY ),
+				data: ev.dataTransfer,
+			}
+
+			cb('drop', this.dragSource, infos );
 			
 			this.dropTarget = null;
 			el.removeClass('drop-over');
+
+			ev.preventDefault();
 		}
 
 		el.setDomEvent('dragenter', dragEnter);

package/lib/src/layout.ts

@@ -153,7 +153,8 @@ interface CellData {
 	width?: number;
 	height?: number;
 	cls?: string;
-	item: ComponentContent;
+	item?: ComponentContent;
+	data?: any;
 }
 
 export class TableLayout extends Container<TableLayoutProps> {
@@ -204,6 +205,17 @@ export class TableLayout extends Container<TableLayoutProps> {
 		this._setCell(row, col, cell, true);
 	}
 
+	setCellData(row: number, col: number, data: any ) {
+		let cell = this._getCell(row, col);
+		cell.data = data;
+		this._setCell(row, col, cell, true);
+	}
+
+	getCellData(row: number, col: number ) {
+		let cell = this._getCell(row, col, false);
+		return cell?.data;
+	}
+
 	merge(row: number, col: number, rowCount: number, colCount: number) {
 		let cell = this._getCell(row, col);
 		cell.rowSpan = rowCount;

package/lib/src/router.ts

@@ -93,18 +93,46 @@ function parseRoute(str: string | RegExp, loose = false): Segment {
 interface RouterEventMap extends EventMap {
 	error: EvError;
 }
-   
+
+
+/**
+ * micro router
+ * 
+ * ```
+ * const router = new Router( );
+ * 
+ * router.get( "/detail/:id", ( params: any ) => {
+ * 	this._showDetail( detail );
+ * } );
+ * 
+ * router.get( "/:id", ( params: any ) => {
+ *   if( params.id==0 )
+ * 		router.navigate( '/home' );
+ *	 }
+ * });
+ * 
+ * router.on( "error", ( ) => {
+ * 	router.navigate( '/home' );
+ * })
+ * 
+ * router.init( );
+ * ```
+ */
+
+
 export class Router extends EventSource< RouterEventMap > {
 
-	private routes: Route[];
+	private m_routes: Route[];
+	private m_useHash: boolean;
 
-	constructor() {
+	constructor( useHash = true ) {
 		super( );
 
-		this.routes = [];
+		this.m_routes = [];
+		this.m_useHash = useHash;
 
 		window.addEventListener('popstate', (event) => {
-			const url = x4document.location.pathname;
+			const url = this._getLocation( );
 			const found = this._find(url);
 		
 			found.handlers.forEach(h => {
@@ -115,15 +143,23 @@ export class Router extends EventSource< RouterEventMap > {
 
 	get(uri: string | RegExp, handler: RouteHandler ) {
 		let { keys, pattern } = parseRoute(uri);
-		this.routes.push({ keys, pattern, handler });
+		this.m_routes.push({ keys, pattern, handler });
 	}
 
 	init() {
-		this.navigate( window.location.pathname );
+		this.navigate( this._getLocation() );
+	}
+
+	private _getLocation( ) {
+		return this.m_useHash ? '/'+x4document.location.hash.substring(1) : x4document.location.pathname;
 	}
 
 	navigate( uri: string, notify = true ) {
 
+		if( !uri.startsWith('/') ) {
+			uri = '/'+uri;
+		}
+
 		const found = this._find( uri );
 
 		if( !found || found.handlers.length==0 ) {
@@ -133,7 +169,16 @@ export class Router extends EventSource< RouterEventMap > {
 			return;
 		}
 
-		window.history.pushState({}, '', uri )
+		if( this.m_useHash ) {
+			while( uri.startsWith('/') ) {
+				uri = uri.substring( 1 );
+			}
+			
+			window.history.pushState({}, '', '#'+uri );
+		}
+		else {
+			window.history.pushState({}, '', uri );
+		}
 
 		if( notify ) {
 			found.handlers.forEach( h => {
@@ -148,7 +193,7 @@ export class Router extends EventSource< RouterEventMap > {
 		let params = {};
 		let handlers = [];
 
-		for (const tmp of this.routes ) {
+		for (const tmp of this.m_routes ) {
 			if (!tmp.keys ) {
 				matches = tmp.pattern.exec(url);
 				if (!matches) {

package/lib/src/version.ts

@@ -27,4 +27,4 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-export const x4js_version = "1.5.23";
+export const x4js_version = "1.5.25";

package/lib/types/application.d.ts

@@ -30,6 +30,7 @@ import { EvMessage } from './x4events';
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
 import { Component } from './component';
 import { Settings } from './settings';
+import { Router } from 'x4js';
 interface ApplicationEventMap extends BaseComponentEventMap {
     message: EvMessage;
     global: EvMessage;
@@ -77,8 +78,10 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     private m_user_data;
     private m_touch_time;
     private m_touch_count;
+    private m_router;
     constructor(props: P);
     ApplicationCreated(): void;
+    get router(): Router;
     get app_name(): string;
     get app_uid(): string;
     get app_version(): string;
@@ -101,4 +104,5 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     enterModal(enter: boolean): void;
     enableTouchDblClick(): void;
 }
+export declare let x4app: Application;
 export {};

package/lib/types/datastore.d.ts

@@ -208,15 +208,15 @@ export declare class AutoRecord extends Record {
 interface DataEventMap extends BaseComponentEventMap {
     change?: EvChange;
 }
+type DataSolver = (data: any) => Record[];
 export interface DataProxyProps extends BaseComponentProps<DataEventMap> {
-    type: 'local' | 'immediate' | 'ajax';
-    path?: string;
-    params?: any;
+    url: string;
+    params?: string[];
+    solver?: DataSolver;
 }
 export declare class DataProxy extends BaseComponent<DataProxyProps, DataEventMap> {
     constructor(props: DataProxyProps);
-    load(): void;
-    save(data: any): void;
+    load(url?: string): void;
     private _refresh;
 }
 /**
@@ -244,7 +244,7 @@ export declare class DataStore extends EventSource<DataStoreEventMap> {
      *
      * @param records
      */
-    load(url: string): void;
+    load(url?: string): void;
     reload(): void;
     /**
      * convert raw objects to real records from model

package/lib/types/drag_manager.d.ts

@@ -28,7 +28,11 @@
 **/
 import { Component } from './component';
 import { Point } from './tools';
-type DropCallback = (command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, point: Point) => void;
+interface DropInfo {
+    pt: Point;
+    data: DataTransfer;
+}
+type DropCallback = (command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo) => void;
 type FilterCallback = (el: Component) => boolean;
 /**
  *
@@ -46,7 +50,7 @@ declare class DragManager {
     /**
      *
      */
-    registerDropTarget(el: Component, cb: DropCallback, filterCB: FilterCallback): void;
+    registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback): void;
     _startCheck(): void;
     _check(): void;
 }

package/lib/types/layout.d.ts

@@ -63,6 +63,8 @@ export declare class TableLayout extends Container<TableLayoutProps> {
     private _getCell;
     private _setCell;
     setCell(row: number, col: number, item: ComponentContent): void;
+    setCellData(row: number, col: number, data: any): void;
+    getCellData(row: number, col: number): any;
     merge(row: number, col: number, rowCount: number, colCount: number): void;
     setCellWidth(row: number, col: number, width?: number): void;
     setCellHeight(row: number, col: number, height?: number): void;

package/lib/types/router.d.ts

@@ -31,11 +31,36 @@ type RouteHandler = (params: any, path: string) => void;
 interface RouterEventMap extends EventMap {
     error: EvError;
 }
+/**
+ * micro router
+ *
+ * ```
+ * const router = new Router( );
+ *
+ * router.get( "/detail/:id", ( params: any ) => {
+ * 	this._showDetail( detail );
+ * } );
+ *
+ * router.get( "/:id", ( params: any ) => {
+ *   if( params.id==0 )
+ * 		router.navigate( '/home' );
+ *	 }
+ * });
+ *
+ * router.on( "error", ( ) => {
+ * 	router.navigate( '/home' );
+ * })
+ *
+ * router.init( );
+ * ```
+ */
 export declare class Router extends EventSource<RouterEventMap> {
-    private routes;
-    constructor();
+    private m_routes;
+    private m_useHash;
+    constructor(useHash?: boolean);
     get(uri: string | RegExp, handler: RouteHandler): void;
     init(): void;
+    private _getLocation;
     navigate(uri: string, notify?: boolean): void;
     private _find;
 }

package/lib/types/version.d.ts

@@ -26,4 +26,4 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-export declare const x4js_version = "1.5.23";
+export declare const x4js_version = "1.5.25";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.5.23",
+	"version": "1.5.25",
 	"description": "X4js core files",
 	"main": "lib/cjs/index.js",
 	"types": "lib/types/index.d.ts",