x4js 2.3.17 → 2.3.18

package/src/components/gridview/gridview.ts

@@ -80,6 +80,12 @@ export interface GridviewProps extends ComponentProps {
 	columns: GridColumn[];
 	emptyMsg?: string;
 
+	/**
+	 * several rows can be selected: Ctrl (Cmd on a Mac) + click adds a row or
+	 * removes it, Shift + click selects up to the row, Ctrl + A selects all
+	 */
+	multisel?: boolean;
+
 	click?: EventCallback<EvClick>;
 	dblClick?: EventCallback<EvDblClick>;
 	contextMenu?: EventCallback<EvContextMenu>;
@@ -155,7 +161,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	private _start: number;
 	private _end: number;
 
-	private _selection: Set<number>;
+	private _selection: Set<any>;	// the ids of the selected records: a row changes place when the view is sorted
 	
 
 	// TODO: that
@@ -195,11 +201,26 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		this.setAttribute("tabindex", 0);
 
 		this.addDOMEvent("created", () => {
+			// back in the document: the view follows its store again (see "removed")
+			if (this._dataview) {
+				this._dataview.open( );
+			}
+
 			this._init();
 			this._dirty = 1;
 			this.lock(false);
 		});
 
+		// out of the document: its store must not keep the grid alive, nor redraw it
+		this.addDOMEvent("removed", () => {
+			if (this._dataview) {
+				this._dataview.close( );
+			}
+
+			// as before its first insertion: nothing is drawn out of the document
+			this.lock( true );
+		});
+
 		this.addDOMEvent("resized", () => {
 			this._updateFlexs( );
 			this._computeFullSize( );
@@ -210,6 +231,200 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			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._dataview && this._dataview.getCount() >= 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 targetRow = ( e: MouseEvent ) => {
+			let el = Component.parentElement(e.target as HTMLElement, Component);
+			while (el && !el.hasClass("row")) {
+				el = el.parentElement();
+			}
+
+			if (el) {
+				return el.getIntData("row");
+			}
+			
+			return undefined;
+		}
+
+		const inColHeader = ( e: MouseEvent ) => {
+			let el = Component.parentElement(e.target as HTMLElement, Component);
+			while (el && !el.hasClass("col-header")) {
+				el = el.parentElement();
+			}
+
+			return !!el;
+		}
+
+		// multisel, Ctrl + click: one row more, or one row less
+		const toggleRow = ( row: number ) => {
+			const id = this._dataview.getIdByIndex( row );
+			if( !this._selection.has( id ) ) {
+				this._addSelection( row );
+				return;
+			}
+
+			this._selection.delete( id );
+			this.queryAll(`.row[data-row="${row}"]`).forEach(el => {
+				el.removeClass("selected");
+			});
+
+			this.fire("selectionChange", { selection: this.getSelection( ) ?? [], empty: this._selection.size==0 } );
+		}
+
+		// multisel, Shift + click: from the row that was selected last to this one
+		const selectTo = ( row: number ) => {
+			let last: any;
+			for (const id of this._selection) {
+				last = id;
+			}
+
+			const from = this._dataview.indexOfId( last );
+
+			this._clearSelection( false );
+
+			// the row to start from is added last: the next Shift + click starts from it too
+			if( from<0 ) {
+				this._addSelection( row, false );
+			}
+			else if( from<=row ) {
+				for( let r=row; r>=from; r-- ) {
+					this._addSelection( r, false );
+				}
+			}
+			else {
+				for( let r=row; r<=from; r++ ) {
+					this._addSelection( r, false );
+				}
+			}
+
+			this.fire("selectionChange", { selection: this.getSelection( ), empty: false } );
+		}
+
+
+		// CLICK
+		this.addDOMEvent("click", (e) => {
+			const row = targetRow( e );
+			if (row!==undefined ) {
+				if( this.props.multisel && ( e.ctrlKey || e.metaKey ) ) {
+					toggleRow( row );
+				}
+				else if( this.props.multisel && e.shiftKey && this._selection.size ) {
+					selectTo( row );
+				}
+				// this row alone
+				else if( this._selection.size!=1 || !this._selection.has( this._dataview.getIdByIndex( row ) ) ) {
+					this._clearSelection( false );
+					this._addSelection(row);
+				}
+
+				// once the selection is what the click made it
+				const rec = this._dataview.getByIndex( row );
+				this.fire( "click", { context: rec } );
+			}
+			// a click in a column header sorts or sizes it: what is selected stays
+			else if( !inColHeader( e ) ) {
+				this._clearSelection( true );
+			}
+		});
+
+		// DBLCLICK
+		this.addDOMEvent("dblclick", (e) => {
+			const row = targetRow( e );
+			if (row!==undefined ) {
+				if( !this._selection.has( this._dataview.getIdByIndex( row ) ) ) {
+					this._clearSelection( false );
+					this._addSelection(row);
+				}
+
+				this._on_dblclk( e, row );
+
+				const rec = this._dataview.getByIndex( row );
+				this.fire( "dblClick", { context: rec } );
+			}
+		});
+
+		// CONTEXT
+		this.addDOMEvent("contextmenu", (e) => {
+			const row = targetRow( e );
+			if (row!==undefined ) {
+				// on a selected row, the menu is for all that is selected
+				if( !this._selection.has( this._dataview.getIdByIndex( row ) ) ) {
+					this._clearSelection( false );
+					this._addSelection(row);
+				}
+
+				const rec = this._dataview.getByIndex( row );
+				this.fire( "contextMenu", { uievent: e, context: rec } );
+			}
+
+			e.preventDefault( );
+			e.stopPropagation( );
+		});
+
+		// MOUSE OVER
+		this.addDOMEvent("mouseover", (e) => {
+
+			if (!this._has_fixed) {
+				return;
+			}
+
+			let el = Component.parentElement(e.target as HTMLElement, Component);
+			while (el && !el.hasClass("row")) {
+				el = el.parentElement();
+			}
+
+			if (el) {
+				const data = el.getData("row");
+
+				this.queryAll(".hover").forEach(x => x.removeClass("hover"));
+
+				if (data) {
+					const rows = this.queryAll(`.row[data-row="${data}"]`);
+					rows.forEach(x => x.addClass("hover"));
+				}
+			}
+		});
+
+		// MOUSE LEAVE
+		this.addDOMEvent("mouseleave", (e) => {
+
+			if (!this._has_fixed) {
+				return;
+			}
+
+			this.queryAll(".hover").forEach(x => x.removeClass("hover"));
+		});
+
+		if( props.multisel ) {
+			this.addShortcut( "Mod+A", ( ) => this.selectAll( ) );
+		}
+
 		if (props.store) {
 			this.setStore(props.store);
 
@@ -272,7 +487,18 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	 */
 
 	navigate( sens: kbNav ) {
-		if( !this._selection.size ) {
+		// no row to go to
+		if( !this._dataview || !this._dataview.getCount( ) ) {
+			return false;
+		}
+
+		// the row to start from: the one of the first selected record
+		let fsel = -1;
+		if( this._selection.size ) {
+			fsel = this._dataview.indexOfId( this._selection.values().next().value );
+		}
+
+		if( fsel<0 ) {
 			if( sens==kbNav.next || sens==kbNav.pgdn )  {
 				sens = kbNav.first;
 			}
@@ -289,7 +515,6 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			return true;
 		}
 		else if( sens==kbNav.prev || sens==kbNav.next ) {
-			const fsel = this._selection.values().next().value;
 			let nel = sens==kbNav.next ? fsel+1 : fsel-1;
 			if( nel>=0 && nel<this._dataview.getCount() ) {
 				this._clearSelection( false );
@@ -301,8 +526,6 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		else if( sens==kbNav.pgdn || sens==kbNav.pgup ) {
 			const pgh = this._vis_rows.size;
 
-			const fsel = this._selection.values().next().value;
-			
 			let sby = sens==kbNav.pgdn ? pgh : -pgh;
 			let nel = fsel+sby;
 
@@ -366,8 +589,20 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				return;
 			}
 
-			if (ev.change_type == 'change') {
-				this._selection.clear();
+			// the data or the filter changed: a record that left the view leaves the selection
+			if (ev.change_type != 'sort') {
+				let lost = false;
+
+				for (const id of this._selection) {
+					if (this._dataview.indexOfId( id ) < 0) {
+						this._selection.delete( id );
+						lost = true;
+					}
+				}
+
+				if (lost) {
+					this.fire("selectionChange", { selection: this.getSelection( ) ?? [], empty: this._selection.size==0 } );
+				}
 			}
 
 			this._updateFlexs( );
@@ -375,9 +610,9 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			this._update(true);
 		}
 
-		// unlink previous observer
+		// the previous view stops following its store
 		if (this._dataview) {
-			this._dataview.off('view_change', on_change);
+			this._dataview.close( );
 		}
 
 		if (store) {
@@ -497,7 +732,9 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			const sizer = new CSizer("right");
 
 			sizer.on("stop", ( ) => {
+				// the flex columns took what was left: the body gets the width of its columns
 				this._updateFlexs( );
+				this._computeFullSize( );
 			})
 
 			sizer.on("resize", (ev) => {
@@ -519,6 +756,24 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				}
 			})
 
+			// a double click on the sizer: the column takes its share of the place
+			// that is left (flex 1). To stop taking it, the sizer is dragged
+			sizer.addDOMEvent("dblclick", (ev) => {
+				// both: the cell under the sizer sorts its column on a double click
+				ev.stopPropagation( );
+				ev.preventDefault( );
+
+				// a fixed column is not in the place that is shared
+				if (fixed || cdata.flex) {
+					return;
+				}
+
+				cdata.flex = 1;
+
+				this._updateFlexs( );
+				this._computeFullSize( );
+			});
+
 			const cell = new Component({
 				cls: `cell`,
 				attrs: { "data-col": col },
@@ -530,6 +785,11 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				]
 			});
 
+			// the column the grid is sorted by
+			if (cdata.sens) {
+				cell.addClass( cdata.sens==="up" ? "sorted" : "sorted desc" );
+			}
+
 			cell.addDOMEvent("touchend", () => {
 				const last = cell.getInternalData("touchend");
 				const now = Date.now();
@@ -614,34 +874,29 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		this.setTimeout("sort", 50, () => {
 			let asc = true;
 
-			// already sorted ?
-			const scol = this.query(`.col-header .cell[data-col="${col}"]`);
-			if( !scol ) {
-				return;
-			}
+			const cdata = this._getCol(col);
 
 			if( ascending===undefined ) {
-				if (scol.hasClass("sorted")) {
-					if (scol.hasClass("desc")) {
-						asc = true;
-					}
-					else {
-						asc = false;
-					}
-				}
-				else {
-					const sorted = this.queryAll(".sorted");
-					sorted.forEach(x => x.removeClass("sorted asc desc"));
-				}
+				// a double click on the sorted column reverses it
+				asc = cdata.sens!=="up";
 			}
 			else {
 				asc = ascending;
 			}
 
-			scol.setClass("sorted");
-			scol.setClass("desc", !asc);
+			// one column is sorted. It is kept in the columns, not in the header: the header
+			// may not be built yet, and is built again each time the grid comes in the document
+			this._columns.forEach( c => { c.sens = undefined; } );
+			cdata.sens = asc ? "up" : "dn";
 
-			const cdata = this._getCol(col);
+			const sorted = this.queryAll(".sorted");
+			sorted.forEach(x => x.removeClass("sorted asc desc"));
+
+			const scol = this.query(`.col-header .cell[data-col="${col}"]`);
+			if( scol ) {
+				scol.setClass("sorted");
+				scol.setClass("desc", !asc);
+			}
 
 			let num = false;
 			switch (cdata.type) {
@@ -664,6 +919,11 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 			this._update(true);
 
+			// sorted by a double click on a header: what is selected is shown where it went
+			if( ascending===undefined && this._selection.size ) {
+				this._scrollToIndex( this._dataview.indexOfId( this._selection.values().next().value ) );
+			}
+
 			setWaitCursor(false);
 		});
 	}
@@ -689,6 +949,11 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		const col = column.id;
 		const type = column.type;
 
+		// a column that is not a field of the model (actions...) has only its renderer to draw it
+		if( column.renderer && isString( col ) && this._datamodel.getFieldIndex( col )<0 ) {
+			return column.renderer( rec, col );
+		}
+
 		let data = this._datamodel.getRaw(col, rec);
 		if (data === undefined || data === null) {
 			return null;
@@ -837,7 +1102,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		const rowel = new Box({ cls: "row", style: { top: top.toFixed(2) + "px" }, content: els });
 		rowel.setData("row", rowid + "");
 
-		if (this._selection.has(rowid)) {
+		if (this._selection.has( this._dataview.getRecId( rec ) )) {
 			rowel.addClass("selected");
 		}
 
@@ -894,7 +1159,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		const rowel = new Box({ cls: "row", style: { top: top + "px" }, content: cols });
 		rowel.setData("row", rowid + "");
 
-		if (this._selection.has(rowid)) {
+		if (this._selection.has( this._dataview.getRecId( rec ) )) {
 			rowel.addClass("selected");
 		}
 
@@ -913,8 +1178,13 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 		for (let x = 0; x < ccount; x++) {
 			const cdata = this._getCol(x);
-		
-			if( !cdata.fixed && cdata.flex ) {
+
+			// the fixed columns are not in the viewport: their width is not taken from its own
+			if( cdata.fixed ) {
+				continue;
+			}
+
+			if( cdata.flex ) {
 				flexc += cdata.flex;
 			}
 			else {
@@ -1016,129 +1286,6 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			this._update()
 		});
 
-		// WHEEL
-		this.addDOMEvent("wheel", (ev: WheelEvent) => {
-			if (ev.deltaY && this._dataview && this._dataview.getCount() >= 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 targetRow = ( e: MouseEvent ) => {
-			let el = Component.parentElement(e.target as HTMLElement, Component);
-			while (el && !el.hasClass("row")) {
-				el = el.parentElement();
-			}
-
-			if (el) {
-				return el.getIntData("row");
-			}
-			
-			return undefined;
-		}
-
-
-		// CLICK
-		this.addDOMEvent("click", (e) => {
-			const row = targetRow( e );
-			if (row!==undefined ) {
-				//TODO: multiselection
-				if( !this._selection.has(row) ) {
-					this._clearSelection( false );
-					this._addSelection(row);
-				}
-			}
-			else {
-				this._clearSelection( true );
-			}
-		});
-
-		// DBLCLICK
-		this.addDOMEvent("dblclick", (e) => {
-			const row = targetRow( e );
-			if (row!==undefined ) {
-				//TODO: multiselection
-				if( !this._selection.has(row) ) {
-					this._clearSelection( false );
-					this._addSelection(row);
-				}
-
-				this._on_dblclk( e, row );
-
-				const rec = this._dataview.getByIndex( row );
-				this.fire( "dblClick", { context: rec } );
-			}
-		});
-
-		// CONTEXT
-		this.addDOMEvent("contextmenu", (e) => {
-			const row = targetRow( e );
-			if (row!==undefined ) {
-				//TODO: multiselection
-				if( !this._selection.has(row) ) {
-					this._clearSelection( false );
-					this._addSelection(row);
-				}
-
-				const rec = this._dataview.getByIndex( row );
-				this.fire( "contextMenu", { uievent: e, context: rec } );
-			}
-
-			e.preventDefault( );
-			e.stopPropagation( );
-		});
-
-		// MOUSE OVER
-		this.addDOMEvent("mouseover", (e) => {
-
-			if (!this._has_fixed) {
-				return;
-			}
-
-			let el = Component.parentElement(e.target as HTMLElement, Component);
-			while (el && !el.hasClass("row")) {
-				el = el.parentElement();
-			}
-
-			if (el) {
-				const data = el.getData("row");
-
-				this.queryAll(".hover").forEach(x => x.removeClass("hover"));
-
-				if (data) {
-					const rows = this.queryAll(`.row[data-row="${data}"]`);
-					rows.forEach(x => x.addClass("hover"));
-				}
-			}
-		});
-
-		// MOUSE LEAVE
-		this.addDOMEvent("mouseleave", (e) => {
-
-			if (!this._has_fixed) {
-				return;
-			}
-
-			this.queryAll(".hover").forEach(x => x.removeClass("hover"));
-		});
-
 		this._updateFlexs( );
 
 		this._fheader = this._buildColHeader(true);
@@ -1271,17 +1418,37 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		this._clearSelection( false );
 	}
 
+	/**
+	 * Select every record of the view (with multisel only).
+	 * The id of each record is kept, and selectionChange gives them all:
+	 * on a very large view this costs memory.
+	 */
+
+	selectAll( ) {
+		const count = this._dataview ? this._dataview.getCount( ) : 0;
+		if( !this.props.multisel || !count ) {
+			return;
+		}
+
+		for( let row=0; row<count; row++ ) {
+			this._selection.add( this._dataview.getIdByIndex( row ) );
+		}
+
+		this.queryAll(".row").forEach(el => {
+			el.addClass("selected");
+		});
+
+		this.fire("selectionChange", { selection: this.getSelection( ), empty: false } );
+	}
+
 	private _clearSelection( notify: boolean ) {
 		if( !this._selection.size ) {
 			return;
 		}
 
-		for (const ref of this._selection.keys()) {
-			const els = this.queryAll(`.row[data-row="${ref}"]`)
-			els.forEach(el => {
-				el.removeClass("selected");
-			})
-		}
+		this.queryAll(".row.selected").forEach(el => {
+			el.removeClass("selected");
+		});
 
 		this._selection.clear();
 		if( notify ) {
@@ -1293,16 +1460,18 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	 * 
 	 */
 
-	private _addSelection(rowid: number) {
-		this._selection.add(rowid)
+	private _addSelection(rowid: number, notify = true) {
+		this._selection.add( this._dataview.getIdByIndex( rowid ) );
 
 		const els = this.queryAll(`.row[data-row="${rowid}"]`)
 		els.forEach(el => {
 			el.addClass("selected");
 		});
 
-		const rec = this._dataview.getByIndex( rowid );
-		this.fire("selectionChange", { selection: [rec], empty: false } );
+		// all that is selected, not this row only
+		if( notify ) {
+			this.fire("selectionChange", { selection: this.getSelection( ), empty: false } );
+		}
 	}
 
 	/**
@@ -1310,25 +1479,31 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	 */
 	
 	getSelection( ) {
-		if( this._selection.size==0 ) {
-			return null;
+		// a record may be gone: out of the document, the grid does not follow its store
+		const recs: DataRecord[] = [];
+		for (const id of this._selection) {
+			const rec = this._dataview.getById( id );
+			if (rec) {
+				recs.push( rec );
+			}
 		}
 
-		const ids = [...this._selection.values() ];
-		return ids.map( id => this._dataview.getByIndex(id) );
+		return recs.length ? recs : null;
 	}
 
 	/**
-	 * 
+	 *
 	 */
 
 	getFirstSel( ) {
-		if( this._selection.size==0 ) {
-			return null;
+		for (const id of this._selection) {
+			const rec = this._dataview.getById( id );
+			if (rec) {
+				return rec;
+			}
 		}
 
-		const id = this._selection.values().next().value;
-		return this._dataview.getByIndex( id );
+		return null;
 	}
 
 	/**