x4js 2.0.28 → 2.0.30

package/src/components/spreadsheet/spreadsheet.ts

@@ -18,7 +18,7 @@
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 import { GridColumn } from '../gridview/gridview'
 
-import { class_ns, isNumber, isString, setWaitCursor } from '../../core/core_tools';
+import { class_ns, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
 import { CoreEvent, EventCallback, EventMap } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -31,15 +31,21 @@ import { SimpleText } from '../label/label';
 
 import check_icon from "../checkbox/check.svg";
 import "./spreadsheet.module.scss"
-import { CoreElement, EvViewChange } from '../../x4.js';
+import { CoreElement } from '../../x4.js';
 
 interface CellRef {
 	col: number;
 	row: number;
 }
 
+export type CellClassifier = ( row: number, col: number ) => string;	    // return the cell computed class
+export type RowClassifier = (row: number ) => string;	    				// return the row computed class
 export type CellRenderer = (row: number, col: number, content: any) => Component;
 
+export interface SpreadsheetColumn extends Omit<GridColumn,"classifier"> {
+    cellClassifier?: CellClassifier;
+}
+
 
 function mkid(row: number, col: number) {
 	return ((row & 0xfffff) << 12) | (col & 0xfff);
@@ -85,6 +91,7 @@ export class Store extends CoreElement<StoreEvents> {
 					n.set(k, v);
 				}
 			});
+			this._data = n;
 		}
 
 		this._maxrows = rows;
@@ -108,6 +115,10 @@ export class Store extends CoreElement<StoreEvents> {
 		return this._data.get(mkid(row, col));
 	}
 
+	hasData( row: number, col?: number ) {
+		return this._data.has( col===undefined ? row : mkid(row, col));
+	}
+
 	lock() {
 		this._lock++;
 	}
@@ -121,6 +132,29 @@ export class Store extends CoreElement<StoreEvents> {
 		}
 	}
 
+	removeRow( row_num: number ) {
+
+		if( row_num>=this._maxrows ) {
+			return;
+		}
+
+		const n = new Map<number, any>();
+		this._data.forEach( (v, k) => {
+			const row = k >> 12;
+			if (row != row_num) {
+				if( row>row_num ) {
+					k = mkid(row-1,k&0xfff) 
+				}
+				
+				n.set(k, v);
+			}
+		} );
+		this._data = n;
+
+		this._maxrows--;
+		this._changed( );
+	}
+
 	private _changed() {
 		if (!this._lock) {
 			this.fire("changed", {});
@@ -130,6 +164,12 @@ export class Store extends CoreElement<StoreEvents> {
 			this._change = true;
 		}
 	}
+
+	clear( ) {
+		this._data = new Map();
+		this._maxrows = 0;
+		this._changed( );
+	}
 }
 
 
@@ -149,7 +189,9 @@ export interface SpreadsheetEvents extends ComponentEvents {
 export interface SpreadsheetProps extends ComponentProps {
 	footer?: boolean;
 	store: Store;
-	columns: GridColumn[];
+	columns: SpreadsheetColumn[];
+	rowClassifier?: RowClassifier;
+
 
 	click?: EventCallback<EvClick>;
 	dblClick?: EventCallback<EvDblClick>;
@@ -169,7 +211,7 @@ export interface SpreadsheetProps extends ComponentProps {
 @class_ns("x4")
 export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extends SpreadsheetEvents = SpreadsheetEvents> extends Component<P, E> {
 
-	private _columns: GridColumn[];
+	private _columns: SpreadsheetColumn[];
 	private _store: Store;
 
 	private _lock: number;
@@ -427,9 +469,17 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 				return;
 			}
 
-			//if (ev.change_type == 'change') {
-			this._selection.clear();
-			//}
+			// try to keep selection
+			if (ev.type == 'changed' && this._selection.size ) {
+				const nsel = new Set<number>();
+				this._selection.forEach(x => {
+					if( this._store.hasData( x ) ) {
+						nsel.add( x );
+					}
+				});
+
+				this._selection = nsel;
+			}
 
 			this._updateFlexs();
 			this._computeFullSize();
@@ -598,10 +648,10 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		return header;
 	}
 	/**
-	 * 
+	 * extra_cls est input/output
 	 */
 
-	private _renderCell(row: number, column: GridColumn, extra_cls: string[]): ComponentContent {
+	private _renderCell(row: number, column: SpreadsheetColumn, extra_cls: string[]): ComponentContent {
 
 		const col = column.id;
 		const type = column.type;
@@ -611,14 +661,14 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			return null;
 		}
 
-		let cls = "";
-		//if( column.classifier ) {
-		//	extra_cls.push( column.classifier( data, rec, col ) );
-		//}
+        let cls = "";
+		if( column.cellClassifier ) {
+			extra_cls.push( column.cellClassifier( row, col ) );
+		}
 
-		//if (data instanceof Function) {
-		//	return data(rec, col);
-		//}
+        if( data instanceof UnsafeHtml ) {
+            return data;
+        }
 
 		if (column.formatter) {
 			return column.formatter(data);
@@ -661,7 +711,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 			case "percent": {
 				return new Box({
-					cls: "percent" + cls,
+					cls: "percent " + cls,
 					content: new Component({ cls: "bar", width: data + "%" })
 				});
 			}
@@ -733,8 +783,16 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 			els.push(el);
 		}
+		
+		let row_cls = 'row';
+		if( this.props.rowClassifier ) {
+			const xtra = this.props.rowClassifier( rowid );
+			if( xtra ) {
+				row_cls += ' ' + xtra.trim();
+			}
+		}
 
-		return new Box({ cls: "row", style: { top: top.toFixed(2) + "px" }, content: els });
+		return new Box({ cls: row_cls, style: { top: top.toFixed(2) + "px" }, content: els });
 	}
 
 	/**
@@ -968,11 +1026,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					this._addSelection(ref.ref,true);
 				}
 
-				this._on_dblclk(e, ref.row, ref.col);
-
-				debugger;
-				//const rec = this._dataview.getByIndex( row );
-				//this.fire( "dblClick", { context: rec } );
+				this.fire( "dblClick", { context: { row: ref.row, col: ref.col } } );
 			}
 		});
 
@@ -986,9 +1040,10 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					this._addSelection(ref.ref, true );
 				}
 
-				debugger;
-				//const rec = this._dataview.getByIndex( row );
-				//this.fire( "contextMenu", { uievent: e, context: rec } );
+				this.fire( "contextMenu", { uievent: e, context: { row: ref.row, col: ref.col } } );
+			}
+			else {
+				this.fire( "contextMenu", { uievent: e, context: null } );
 			}
 
 			e.preventDefault();
@@ -1017,14 +1072,6 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		this._computeFullSize();
 	}
 
-	/**
-	 * 
-	 */
-
-	protected _on_dblclk(e: UIEvent, row: number, col: number) {
-
-	}
-
 	/**
 	 * 
 	 */

package/src/components/tabs/tabs.module.scss

@@ -40,6 +40,7 @@
 	&> .body {
 		padding: 8px;
 		border: 1px solid var( --border );
+		min-height: 0;
 	}
 }
 

package/src/components/textarea/textarea.ts

@@ -32,6 +32,7 @@ interface TextAreaProps extends BaseProps {
 	value?: string;
 	resize?: boolean;
 	readonly?: boolean;
+	trim?: boolean;
 }
 
 
@@ -39,7 +40,7 @@ interface TextAreaProps extends BaseProps {
  * 
  */
 
-class SimpleTextArea extends Component {
+class SimpleTextArea extends Component<TextAreaProps> {
 
 	constructor( props: TextAreaProps ) {
 		super( { ...props, tag: "textarea" } );
@@ -61,7 +62,12 @@ class SimpleTextArea extends Component {
 	}
 
 	getText( ) {
-		return (this.dom as HTMLTextAreaElement).value;
+		let text = (this.dom as HTMLTextAreaElement).value;
+		if( this.props.trim!==false ) {
+			text = text.trim();
+		}
+
+		return text;
 	}
 
 	queryInterface<T>(name: string): T {

package/src/components/textedit/textedit.ts

@@ -88,7 +88,14 @@ export class TextEdit extends HBox {
 		}
 
 		const gadgets = props.inputGadgets ?? [];
+		gadgets.forEach( g => {
+			g.addClass( "gadget" );
+		})
+
+
 		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
+		// no propagation...
+		delete iprops.cls;
 
 		this.setContent( [
 			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [

package/src/components/themes.scss

@@ -33,6 +33,7 @@ $color--interval: 8.4%;
 	--color-primary-a90: #{darken($color--base, $color--interval * 4)};
 	--color-primary-a100: #000000;
 
+	--color-danger-a30: #{lighten(#c01010,30%)};
 	--color-danger-a50: #c01010;
 	--color-danger-a60: #{darken(#c01010,10%)};
 
@@ -46,6 +47,7 @@ $color--interval: 8.4%;
 	// Backgrounds
 	--background-primary: var(--color-primary-a0); // Fond principal
 	--background-secondary: var(--color-primary-a10); // Fond secondaire
+	--background-ternary: #f4f4f4; // Fond secondaire
 
 	// Texts
 	--text-primary: var(--color-primary-a100); // Texte principal

package/src/components/tooltips/tooltips.ts

@@ -28,6 +28,7 @@ import icon from "./comments-question.svg"
 
 let last_hit: HTMLElement = null;
 let tooltip: Tooltip = null;
+let mouse_pos: Point = {x:0, y:0 };
 
 const timer = new Timer( );
 
@@ -53,15 +54,20 @@ export function initTooltips( ) {
 
 	}, true );
 
-	document.addEventListener( "mouseleave", ( ev: Event ) => {
+	document.addEventListener( "mouseleave", ( ev: MouseEvent ) => {
 		//console.log( "leave", ev.target );
-
 		if( last_hit && ev.target==last_hit ) {
 			last_hit = null;
 			closeTT( );
 		}
 
 	}, true );
+
+	document.addEventListener( "mousemove", ( ev: MouseEvent ) => {
+		if( last_hit ) {
+			mouse_pos = { x:ev.pageX, y:ev.pageY }
+		}
+	});
 }
 
 function showTT( text: string, rc: Rect, pt: Point ) {
@@ -71,8 +77,14 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 
 	timer.setTimeout( null, 300, ( ) => {
 		tooltip.setText( unsafeHtml(text) );
+
+		let y = mouse_pos.y;
+		if( rc.contains(mouse_pos) ) {
+			y = rc.bottom;
+		}
+
 		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
-		tooltip.displayAt( pt.x+17, pt.y+17 );
+		tooltip.displayAt( mouse_pos.x+17, y+5 );
 	} );
 }