x4js 2.3.17 → 2.3.19

package/src/core/core_data.ts

@@ -91,11 +91,8 @@ function _getMetas( obj: object, create = true ) : MetaInfos {
 		mfld = Object.prototype.hasOwnProperty.call(ctor,metaFields) ? ctor[metaFields] : undefined;
 	}
 	
+	// a class without decorators of its own comes here too: its metas are made from its parent's
 	if( mfld===undefined ) {
-		if( !create && ctor!=DataModel ) {
-			console.assert( mfld!==undefined );
-		}
-		
 		// construct our metas
 		mfld = new MetaInfos( ctor.name );
 
@@ -105,8 +102,6 @@ function _getMetas( obj: object, create = true ) : MetaInfos {
             if( pctor!=DataModel ) {
                 let pmetas = pctor[metaFields];
                 mfld.fields = [...pmetas.fields, ...mfld.fields ]
-                
-                console.assert( mfld.id===undefined, 'cannot define mutiple record id' );
                 if( !mfld.id ) {
                     mfld.id = pmetas.id;
                 }
@@ -143,6 +138,7 @@ export namespace data {
 			required: true,
 		});
 
+		console.assert( !metas.id, 'cannot define multiple record id' );	// the parent class has one already
 		metas.id = fldName;
 	}
 }
@@ -371,7 +367,7 @@ export class DataModel<T = any> {
 		});
 
 		if( id!==undefined ) {
-			rec[fields[0].name] = id;
+			rec[_getMetas( this, false ).id] = id;		// the field of the id, as getID reads it
 		}
 		else {
 			console.assert( this.getID(rec)!==undefined ); // store do not have ID field
@@ -517,6 +513,10 @@ export interface DataProxyProps {
 	solver?: DataSolver;
 }
 
+/**
+ * @deprecated the loading from an url is to be reviewed
+ */
+
 export class DataProxy extends CoreElement<DataEventMap> {
 
 	protected m_props: DataProxyProps;
@@ -561,8 +561,11 @@ export class DataProxy extends CoreElement<DataEventMap> {
 interface DataStoreProps  {
 	model: DataModel;
 	data?: any[];
+	/** @deprecated the loading from an url is to be reviewed: load the data, then setData */
 	url?: string;
+	/** @deprecated see url */
 	autoload?: false;
+	/** @deprecated see url */
 	solver?: DataSolver;
 }
 
@@ -615,14 +618,15 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 	}
 
 	/**
-	 * 
-	 * @param records 
+	 * @deprecated the loading from an url is to be reviewed: load the data, then setData.
+	 * Only for a store created with url and no data; an HTTP error is not reported
 	 */
 
 	async load( url?: string ) {
 		return this.m_proxy.load( url );
 	}
 
+	/** @deprecated see load */
 	async reload( ) {
 		return this.m_proxy.load( );
 	}
@@ -813,8 +817,13 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 		return this.m_records[index] ?? null;
 	}
 
+	/**
+	 * gives the records to other: this store is emptied, they do not share them
+	 */
+
 	public moveTo( other: DataStore ) {
 		other.setRawData( this.m_records );
+		this.setRawData( [] );
 	}
 	
 	/**
@@ -871,32 +880,32 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					return new Uint32Array(0);
 				}
 				
-				let filterValue = filter.value;
+				let filterValue: any = filter.value;
 				if( isString(filterValue) && !filter.caseSensitive ) {
 					filterValue = filterValue.toUpperCase( );
 				}
-				
-				const _lt = ( recval: string ) : boolean => {
+
+				const _lt = ( recval: any ) : boolean => {
 					return recval < filterValue;
 				}
 
-				const _le = ( recval: string ) : boolean => {
+				const _le = ( recval: any ) : boolean => {
 					return recval <= filterValue;
 				}
 
-				const _eq = ( recval: string ) : boolean => {
+				const _eq = ( recval: any ) : boolean => {
 					return recval == filterValue;
 				}
 
-				const _neq = ( recval: string ) : boolean => {
+				const _neq = ( recval: any ) : boolean => {
 					return recval != filterValue;
 				}
 
-				const _ge = ( recval: string ) : boolean => {
+				const _ge = ( recval: any ) : boolean => {
 					return recval >= filterValue;
 				}
 
-				const _gt = ( recval: string ) : boolean => {
+				const _gt = ( recval: any ) : boolean => {
 					return recval > filterValue;
 				}
 
@@ -905,9 +914,10 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					return filterRe.test( recval );
 				}
 
-				let filterFn: ( rec: string ) => boolean;	// filter fn 
+				let filterFn: ( rec: any ) => boolean;	// filter fn
 				let filterRe: RegExp;	// if fielter is regexp
 				if( filterValue instanceof RegExp ) {
+					// tested on the field as it is: the regexp says if the case counts (flag i)
 					filterRe = filterValue;
 					filterFn = _re;
 				}
@@ -921,7 +931,14 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 						case '<>':  { filterFn = _neq; break; }
 					}
 				}
-			
+
+				// int, float, date: compared as numbers, a date by its time
+				const type = this.m_fields[filterFld].type;
+				const numeric = !filterRe && (type==='int' || type==='float' || type==='date');
+				if( numeric ) {
+					filterValue = type==='date' ? new Date( filter.value as any ).getTime( ) : Number( filter.value );
+				}
+
 				// scan all records and append only interesting ones
 				const m = this.m_model;
 
@@ -933,12 +950,16 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					}
 
 					let field = m.getRaw( filterFld, rec );
-					if( field===null || field===undefined ) {
+					if( numeric ) {
+						// +: a Date gives its time, without a new object. A null field: NaN, every comparison is false but <>
+						field = field===null || field===undefined ? NaN : +field;
+					}
+					else if( field===null || field===undefined ) {
 						field = '';
 					}
 					else {
 						field = ''+field;
-						if( !filter.caseSensitive ) {
+						if( !filter.caseSensitive && !filterRe ) {
 							field = field.toUpperCase( );
 						}
 					}
@@ -960,14 +981,17 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 			fidx: number,
 			asc: boolean,
 			cb: SortCallback,
+			numeric: boolean,
 		}
 
 		let bads = 0;		// unknown fields
 		let fidxs: sort_info[] = [];		// fields indexes
 
-		// if no fields are given, reset sort by id
+		// if no fields are given, reset sort by id: the field marked by data.id( ),
+		// which is not always the first one, and the order in which indexOfId searches
 		if ( sort===null ) {
-			fidxs.push( { fidx: 0, asc: true, cb: null } );
+			const id = _getMetas( this.m_model, false ).id;
+			fidxs.push( { fidx: this.m_model.getFieldIndex( id ), asc: true, cb: null, numeric: false } );
 		}
 		else {
 			fidxs = sort.map( (si) => {
@@ -978,7 +1002,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					bads++;
 				}
 
-				return { fidx: fi, asc: si.ascending, cb: si.callback };
+				return { fidx: fi, asc: si.ascending, cb: si.callback, numeric: si.numeric };
 			});
 		}
 
@@ -994,6 +1018,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 
 			const field = fidxs[0].fidx;
 			const cb 	= fidxs[0].cb;
+			const numeric = fidxs[0].numeric;
 
 			index.sort( ( ia, ib ) => {
 
@@ -1004,6 +1029,10 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					return cb( va, vb );
 				}
 
+				if( numeric ) {
+					return Number( va ) - Number( vb );
+				}
+
 				if (va > vb) { return 1; }
 				if (va < vb) { return -1; }
 				return 0;
@@ -1024,8 +1053,17 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					let va = m.getRaw( fidx, this.getByIndex(ia) ) ?? '';
 					let vb = m.getRaw( fidx, this.getByIndex(ib) ) ?? '';
 
+					// a field that finds them equal gives the hand to the next one
 					if( fi.cb ) {
-						return fi.cb( va, vb );
+						const r = fi.cb( va, vb );
+						if( r ) { return r*mul; }
+						continue;
+					}
+
+					if( fi.numeric ) {
+						const r = Number( va ) - Number( vb );
+						if( r ) { return r*mul; }		// NaN, not a number: equal
+						continue;
 					}
 
 					if (va > vb) { return mul; }
@@ -1121,7 +1159,7 @@ export type FilterFunc = ( rec: DataRecord ) => boolean;
 export interface FilterInfo {
 	op: '<' | '<=' | '=' | '>=' | '>' | '<>' | 'empty-result' | FilterFunc,	// emptydb mean return an empty result always
 	field?: string;
-	value?: string | RegExp; // if regexp then operator is =
+	value?: string | number | RegExp; // if regexp then operator is =
 	caseSensitive?: boolean;
 }
 
@@ -1152,41 +1190,72 @@ export class DataView extends CoreElement<DataViewEventMap>
 
 	protected m_props: DataViewProps;
 
+	private m_unlink: ( ) => void;	// stops listening to the store
+
 	constructor( props: DataViewProps ) {
 		super( );
 
 		this.m_props = props;
 		this.m_store = props.store;
 		this.m_index = null;
-		this.m_filter = null;
-		this.m_sort = null;
 		this.m_model = this.m_store.getModel();
+		this.m_filter = props.filter;
 
-		this.filter( props.filter );
-		
-		if( props.order ) {
-			if( isString(props.order) ) {
-				this.sort( [ { field: props.order, ascending: true } ] );
-			}
-			else if( isArray(props.order) ) {
-				this.sort( props.order );
-			}
-			else {
-				this.sort( [props.order] );
-			}
+		if( !props.order ) {
+			this.m_sort = null;
+		}
+		else if( isString(props.order) ) {
+			this.m_sort = [ { field: props.order, ascending: true } ];
+		}
+		else if( isArray(props.order) ) {
+			this.m_sort = props.order;
 		}
 		else {
-			this.sort( null );
+			this.m_sort = [props.order];
 		}
 
-		this.m_store.addListener( 'data_change', ( e ) => this._storeChange(e) );
+		// listens to the store, then filters and sorts
+		this.open( );
 	}
 
-	private _storeChange( ev: EvDataChange ) {
-		
-		this._filter( this.m_filter, ev.type!='change' );
-		this._sort( this.m_sort, ev.type!='change' );
-		
+	/**
+	 * The view follows its store: it is filtered and sorted with what the
+	 * store holds now, and again at each of its changes.
+	 * Called when the view is made, and to use it again after a close( ).
+	 */
+
+	open( ) {
+		if( this.m_unlink ) {
+			return;
+		}
+
+		this.m_unlink = this.m_store.addListener( 'data_change', ( ) => this._storeChange( ) );
+		this._storeChange( );
+	}
+
+	/**
+	 * The view stops following its store, until open( ) is called.
+	 * A store keeps every view that listens to it: without this, a view
+	 * that is not used anymore would still be filtered, sorted and heard at
+	 * each change.
+	 */
+
+	close( ) {
+		if( this.m_unlink ) {
+			this.m_unlink( );
+			this.m_unlink = null;
+		}
+	}
+
+	private _storeChange( ) {
+
+		// filtered and sorted again without telling: the event that follows says it all.
+		// _filter sorts when the view is sorted; when it is not, it is by id
+		this._filter( this.m_filter, false );
+		if( !this.m_sort ) {
+			this._sort( null, false );
+		}
+
 		this.fire( 'view_change', { change_type: 'change' } );
 	}
 
@@ -1206,9 +1275,9 @@ export class DataView extends CoreElement<DataViewEventMap>
 		this.m_index = this.m_store.createIndex( filter );
 		this.m_filter = filter;
 
-		// need to sort again:
+		// need to sort again, without telling: the filter is what changed
 		if( this.m_sort ) {
-			this.sort( this.m_sort );
+			this._sort( this.m_sort, false );
 		}
 		
 		if( notify ) {

package/src/core/core_dom.ts

@@ -19,7 +19,7 @@ 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,
-	dragdrop: 1, dragenter: 1, dragexit: 1, draggesture: 1, dragover: 1, contextmenu: 1, created: 2, removed: 2, sizechange: 2
+	dragdrop: 1, dragenter: 1, dragexit: 1, draggesture: 1, dragover: 1, contextmenu: 1, created: 2, removed: 2, resized: 2
 };
 
 export type DOMEventHandler = ( ev: Event ) => void;
@@ -38,12 +38,14 @@ const observeMutation = (mutations: MutationRecord[], observer: MutationObserver
 	// moves are handled this way
 	const added   = new Set<Node>( );
 	const removed = new Set<Node>( );
+	const moved   = new Set<Node>( );		// out of their place and back in the document in the same task
 
 	for( const mutation of mutations ) {
 		if( mutation.type == "childList" ) {
 			mutation.addedNodes.forEach( n => {
 				if( removed.has( n ) ) {
-					removed.delete( n ); 
+					removed.delete( n );
+					moved.add( n );
 				}
 				else { 
 					added.add( n ); 
@@ -70,6 +72,12 @@ const observeMutation = (mutations: MutationRecord[], observer: MutationObserver
 
 	const notify = ( node: Node, create: boolean ) => {
 
+		// a node that was only moved was created before, as all that it holds,
+		// even when it is moved into a node that is new
+		if( create && moved.has( node ) ) {
+			return;
+		}
+
 		if( create ) {
 			sendEvent( node, "created" );
 		}
@@ -118,8 +126,12 @@ function observeSize(entries: ResizeObserverEntry[]) {
 
 export function dispatchEvent(ev: Event) {
 
-	let target = ev.target as Node,
-		noup = (unbubbleEvents as any)[ev.type] === 2;
+	// 2: an event of x4, for its node only.
+	// 1: stops at its node when the browser does not bubble it (focus, mouseenter...)
+	const flag = (unbubbleEvents as any)[ev.type];
+	const noup = flag===2 || ( flag===1 && !ev.bubbles );
+
+	let target = ev.target as Node;
 
 	while (target) {
 		const store = event_handlers.get( target );
@@ -127,8 +139,11 @@ export function dispatchEvent(ev: Event) {
 			const callback = store[ev.type];
 			if( callback ) {
 				if( Array.isArray(callback) ) {
-					callback.some( c => c( ev ) );
-				}	
+					// a handler that returns true stops those that follow it on this node.
+					// true only: an arrow function returns what its expression does
+					// (ev => this.show( ) returns this), and this must stop nothing
+					callback.some( c => (c( ev ) as any)===true );
+				}
 				else {
 					callback( ev );
 				}
@@ -255,7 +270,17 @@ export interface GlobalDOMEvents {
 	 * @param ev The mouse event.
 	 */
 	contextmenu?: (ev: MouseEvent) => any;
+	/**
+	 * Fires when the user copies (the keys, or the menu of the browser).
+	 * @param ev The clipboard event: see setEventClipboard.
+	 */
+	copy?: (ev: ClipboardEvent) => any;
 	cuechange?: (ev: Event) => any;
+	/**
+	 * Fires when the user cuts.
+	 * @param ev The clipboard event: see setEventClipboard.
+	 */
+	cut?: (ev: ClipboardEvent) => any;
 	/**
 	 * Fires when the user double-clicks the object.
 	 * @param ev The mouse event.
@@ -391,6 +416,11 @@ export interface GlobalDOMEvents {
 	 * @param ev The event.
 	 */
 	pause?: (ev: Event) => any;
+	/**
+	 * Fires when the user pastes.
+	 * @param ev The clipboard event: see getEventClipboard.
+	 */
+	paste?: (ev: ClipboardEvent) => any;
 	/**
 	 * Occurs when the play method is requested.
 	 * @param ev The event.

package/src/core/core_dragdrop.ts

@@ -19,13 +19,13 @@ import { Point } from './core_tools';
 
 const x_drag_cb = Symbol( 'x-drag-cb' );
 
-interface DropInfo {
+export interface DropInfo {
 	pt: Point;
 	data: DataTransfer;
 }
 
-type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
-type FilterCallback = ( el: Component, data: DataTransfer ) => boolean;
+export type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
+export type DropFilterCallback = ( el: Component, data: DataTransfer ) => boolean;
 
 /** 
  * Manages drag and drop operations within the application.
@@ -78,6 +78,12 @@ class DragManager {
 		el.addDOMEvent('dragend', (ev: DragEvent) => {
 			el.removeClass( 'dragging' );
 			this.dragGhost.remove();
+
+			// the target that was left is told now, while the source is known.
+			// Then the source is forgotten: the next drag may be one of files
+			// that come from the desktop, which has none
+			this._check( );
+			this.dragSource = null;
 		});
 
 		el.setAttribute('draggable', "true");
@@ -86,7 +92,7 @@ class DragManager {
 	/**
 	 * Registers a component as a drop target.
 	 * This sets up DOM event listeners for `dragenter`, `dragover`, `dragleave`, and `drop`.
-	 * It uses a `DropCallback` to notify the component about drag events and an optional `FilterCallback`
+	 * It uses a `DropCallback` to notify the component about drag events and an optional `DropFilterCallback`
 	 * to determine if the target should accept the dragged item.
 	 *
 	 * @param el - The component to make a drop target.
@@ -94,7 +100,7 @@ class DragManager {
 	 * @param filterCB - An optional callback to filter which draggable items can be dropped.
 	 */
 
-	registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback ) {
+	registerDropTarget(el: Component, cb: DropCallback, filterCB?: DropFilterCallback ) {
 
 		const dragEnter = (ev: DragEvent) => {
 			if( filterCB && !filterCB(this.dragSource,ev.dataTransfer) ) {

package/src/core/core_element.ts

@@ -232,7 +232,7 @@ export class CoreElement<E extends EventMap = EventMap> {
 			return;
 		}
 
-		// Entries no longer mutate the map in clear(), so plain iteration is safe.
+		// clear() of an entry does not touch the map, so plain iteration is safe.
 		for (const entry of this.#timers.values()) {
 			entry.clear();
 		}