x4js 2.3.18 → 2.3.20

package/src/components/spreadsheet/spreadsheet.ts

@@ -348,6 +348,11 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			this.lock(false);
 		});
 
+		// out of the document: nothing is drawn, as before its first insertion
+		this.addDOMEvent("removed", () => {
+			this.lock(true);
+		});
+
 		this.addDOMEvent("resized", () => {
 			this._updateFlexs();
 			this._computeFullSize();
@@ -358,6 +363,139 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			this._on_key(e);
 		})
 
+		// the handlers of the grid itself are put once, here. _init builds what is
+		// inside the grid, each time it comes in the document
+
+		// WHEEL
+		this.addDOMEvent("wheel", (ev: WheelEvent) => {
+			// many rows: one pixel of the scroll bar is one row, wherever the pointer is
+			if (ev.deltaY && this._store && this._store.getRowCount() >= SCROLL_LIMIT) {
+				this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -1 : 1);
+				ev.stopPropagation();
+				ev.preventDefault();
+			}
+			else if (this._has_fixed && ev.deltaY) {
+				// wheel on fixed part
+				//	fixed part do not have scrollbar, so we need to handle it by hand
+				let t = ev.target as Node;
+				while (t != this.dom) {
+					if (t == this._vheader.dom) {
+						this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -this._row_height : this._row_height);
+						ev.stopPropagation();
+						ev.preventDefault();
+						break;
+					}
+
+					t = t.parentNode;
+				}
+			}
+		})
+
+		const targetCell = (e: MouseEvent) => {
+			let el = e.target as Element;
+			while (el && !el.classList.contains("cell")) {
+				el = el.parentElement;
+			}
+
+			if (el) {
+				const cel = componentFromDOM(el);
+				return {
+					ref: cel.getIntData("ref"),
+					row: cel.getInternalData("row"),
+					col: cel.getInternalData("col"),
+				}
+			}
+
+			return undefined;
+		}
+
+
+		// MOUSEDOWN
+		this.addDOMEvent("mousedown", (e) => {
+			if( !this._edit || this._inEditor(e) ) {
+				return;
+			}
+
+			// click on another cell while editing:
+			// validate now, rows may be rebuilt before the click event (and the click lost)
+			const ref = targetCell(e);
+			if( ref && ref.row!==undefined ) {
+				this._endEdit( true, true );
+
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection( false );
+					this._addSelection(ref.ref,true);
+				}
+
+				e.preventDefault( );
+			}
+		});
+
+		// CLICK
+		this.addDOMEvent("click", (e) => {
+			if( this._inEditor(e) ) {
+				return;
+			}
+
+			const ref = targetCell(e);
+			if (ref) {
+				//TODO: multiselection
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection( false );
+					this._addSelection(ref.ref,true);
+				}
+			}
+		});
+
+		// DBLCLICK
+		this.addDOMEvent("dblclick", (e) => {
+			if( this._inEditor(e) ) {
+				return;
+			}
+
+			const ref = targetCell(e);
+			if (ref) {
+				//TODO: multiselection
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection(false);
+					this._addSelection(ref.ref,true);
+				}
+
+				const dev: EvDblClick = { context: { row: ref.row, col: ref.col } };
+				this.fire( "dblClick", dev );
+
+				// checkboxes are toggled, other cells are edited
+				if( !dev.defaultPrevented && !this._toggleCell( ref.row, ref.col ) ) {
+					this.editCell( ref.row, ref.col );
+				}
+			}
+		});
+
+		// CONTEXT
+		this.addDOMEvent("contextmenu", (e) => {
+			// keep the native menu of the editor (copy/paste)
+			if( this._inEditor(e) ) {
+				return;
+			}
+
+			const ref = targetCell(e);
+			if (ref) {
+				//TODO: multiselection
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection( false );
+					this._addSelection(ref.ref, true );
+				}
+
+				this.fire( "contextMenu", { uievent: e, context: { row: ref.row, col: ref.col } } );
+			}
+			else {
+				this.fire( "contextMenu", { uievent: e, context: null } );
+			}
+
+			e.preventDefault();
+			e.stopPropagation();
+		});
+
 		if (props.store) {
 			this.setStore(props.store);
 		}
@@ -643,7 +781,8 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		if (lock) {
 			this._lock++;
 		}
-		else {
+		// an unlock too many leaves it at 0: the grid goes on drawing
+		else if (this._lock > 0) {
 			if (--this._lock == 0 && this._dirty) {
 				this._update(true);
 			}
@@ -1121,136 +1260,6 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			this._update()
 		});
 
-		// WHEEL
-		this.addDOMEvent("wheel", (ev: WheelEvent) => {
-			if (ev.deltaY && this._store && this._store.getRowCount() >= SCROLL_LIMIT) {
-				this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -1 : 1);
-				ev.stopPropagation();
-				ev.preventDefault();
-			}
-
-			if (this._has_fixed && ev.deltaY) {
-				// wheel on fixed part
-				//	fixed part do not have scrollbar, so we need to handle it by hand
-				let t = ev.target as Node;
-				while (t != this.dom) {
-					if (t == this._vheader.dom) {
-						this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -this._row_height : this._row_height);
-						ev.stopPropagation();
-						ev.preventDefault();
-						break;
-					}
-
-					t = t.parentNode;
-				}
-			}
-		})
-
-		const targetCell = (e: MouseEvent) => {
-			let el = e.target as Element;
-			while (el && !el.classList.contains("cell")) {
-				el = el.parentElement;
-			}
-
-			if (el) {
-				const cel = componentFromDOM(el);
-				return {
-					ref: cel.getIntData("ref"),
-					row: cel.getInternalData("row"),
-					col: cel.getInternalData("col"),
-				}
-			}
-
-			return undefined;
-		}
-
-
-		// MOUSEDOWN
-		this.addDOMEvent("mousedown", (e) => {
-			if( !this._edit || this._inEditor(e) ) {
-				return;
-			}
-
-			// click on another cell while editing:
-			// validate now, rows may be rebuilt before the click event (and the click lost)
-			const ref = targetCell(e);
-			if( ref && ref.row!==undefined ) {
-				this._endEdit( true, true );
-
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
-					this._addSelection(ref.ref,true);
-				}
-
-				e.preventDefault( );
-			}
-		});
-
-		// CLICK
-		this.addDOMEvent("click", (e) => {
-			if( this._inEditor(e) ) {
-				return;
-			}
-
-			const ref = targetCell(e);
-			if (ref) {
-				//TODO: multiselection
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
-					this._addSelection(ref.ref,true);
-				}
-			}
-		});
-
-		// DBLCLICK
-		this.addDOMEvent("dblclick", (e) => {
-			if( this._inEditor(e) ) {
-				return;
-			}
-
-			const ref = targetCell(e);
-			if (ref) {
-				//TODO: multiselection
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection(false);
-					this._addSelection(ref.ref,true);
-				}
-
-				const dev: EvDblClick = { context: { row: ref.row, col: ref.col } };
-				this.fire( "dblClick", dev );
-
-				// checkboxes are toggled, other cells are edited
-				if( !dev.defaultPrevented && !this._toggleCell( ref.row, ref.col ) ) {
-					this.editCell( ref.row, ref.col );
-				}
-			}
-		});
-
-		// CONTEXT
-		this.addDOMEvent("contextmenu", (e) => {
-			// keep the native menu of the editor (copy/paste)
-			if( this._inEditor(e) ) {
-				return;
-			}
-
-			const ref = targetCell(e);
-			if (ref) {
-				//TODO: multiselection
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
-					this._addSelection(ref.ref, true );
-				}
-
-				this.fire( "contextMenu", { uievent: e, context: { row: ref.row, col: ref.col } } );
-			}
-			else {
-				this.fire( "contextMenu", { uievent: e, context: null } );
-			}
-
-			e.preventDefault();
-			e.stopPropagation();
-		});
-
 		this._updateFlexs();
 
 		this._fheader = this._buildColHeader(true);

package/src/components/switch/switch.ts

@@ -53,7 +53,8 @@ export class Switch extends HBox<SwitchProps> {
 			new Component( {
 				cls: "switch",
 				content: [
-					new Input( { type: "checkbox", id: inputId, name: props.name, checked: props.checked } ),
+					// value: sent by a <form> of the browser when checked; a Form of x4 reads a boolean
+					new Input( { type: "checkbox", id: inputId, name: props.name, value: props.value, checked: props.checked } ),
 					new Component( { cls: "track" } ),
 					new Component( { cls: "thumb" } ),
 				]

package/src/components/textarea/textarea.module.scss

@@ -24,6 +24,8 @@
 
 .x4simpletextarea {
 
+		flex-shrink: 0;		// alone in a box, it keeps its height: the box does not crush it
+		resize: none;		// no handle unless the prop resize asks for one
 		padding: 4px;
 		outline: none;
 		font: inherit;
@@ -44,10 +46,6 @@
 			color: var( --input-placeholder );
 			font-style: italic;
 		}
-
-		&[resize=false] {
-			resize: none;
-		}
 	}
 
 .x4textarea {

package/src/components/textarea/textarea.ts

@@ -63,8 +63,9 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
 			this.setText( props.value+'' );
 		}
 
+		// none by default (the stylesheet); true: "both", false: "none"
 		if( props.resize!==undefined ) {
-			this.setStyleValue( "resize", props.resize===false ? "none" : props.resize as string );
+			this.setStyleValue( "resize", props.resize===true ? "both" : props.resize===false ? "none" : props.resize );
 		}
 
 		if( props.readonly ) {

package/src/components/textedit/textedit.ts

@@ -87,7 +87,9 @@ export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<
 	private input: Input;
 
 	constructor( props: TextEditProps ) {
-		super( props );
+		// dom_events are for the input (focus, blur, keydown...): not on the box too,
+		// where keydown would run a second time, and focus never (it does not bubble)
+		super( { ...props, dom_events: undefined } );
 
 		if( !props.inputId ) {
 			props.inputId = makeUniqueComponentId()
@@ -104,8 +106,16 @@ export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<
 
 
 		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
-		// no propagation...
+
+		// the props of the box stay on it: given to the input too, a style would be put
+		// twice, a tooltip twice, the height of the box on the field...
 		delete iprops.cls;
+		delete iprops.style;
+		delete iprops.tooltip;
+		delete iprops.hidden;
+		delete iprops.flex;
+		delete iprops.stretch;
+		delete iprops.height;
 
 		this.setContent( [
 			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [

package/src/core/core_application.ts

@@ -104,8 +104,10 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		main_app = this;
 
+		this.props = props;
+
 		const loaded = ( ) => {
-			this.mount( props.mountPoint ?? 'body' )
+			this.mount( this.props.mountPoint )
 		}
 
 		if( document.readyState=='complete' ) {
@@ -141,13 +143,14 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 
 	/**
      * Sets the main view component for the application.
-     * This component will be mounted to the DOM.
+     * This component will be mounted to the DOM, in `mountPoint`.
+     * Called once: each call sets up the keyboard (Tab, shortcuts) again.
      * @param view - The component to set as the main view.
      */
 	
 	setMainView( view: Component ) {
 		this.mainview = view;
-		this.mount( );
+		this.mount( this.props.mountPoint );
 		this._setupKeyboard( );
 	}
 
@@ -321,7 +324,8 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 				return;
 			}
 
-			if( msg_socket ) {
+			// send throws while the socket is connecting
+			if( msg_socket && opened ) {
 				msg_socket.send( JSON.stringify( {
 					msg: e.msg,
 					params: e.params,

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;
 }
 

package/src/core/core_dom.ts

@@ -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" );
 		}