x4js 2.0.28 → 2.0.31

package/src/components/listbox/listbox.ts

@@ -56,6 +56,8 @@ export interface ListboxEvents extends ComponentEvents {
 export interface ListboxProps extends Omit<ComponentProps,'content'> {
 	items?: ListItem[];
 	renderer?: ( item: ListItem ) => Component;
+	title?: string;
+	icon?: string;
 	header?: Header;
 	footer?: Component,
 	checkable?: true,
@@ -104,6 +106,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 
 		this.setContent( [
+			(props.title || props.icon) ? new Label( { cls: 'title', text: props.title, icon: props.icon }) : null,
 			props.header ? props.header : null,
 			scroller,
 			props.footer,
@@ -117,7 +120,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		} );
 
 		if( props.items ) {
-			this.setItems( props.items );
+			this.setItems( props.items, false );
 		}
 	}
 
@@ -191,8 +194,15 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 		else {
 			const selitem = this._itemWithID( this._lastsel );
-			let nel = sens==kbNav.next ? selitem.nextElement() : selitem.prevElement();
-			nel = next_visible( nel, sens==kbNav.next );
+
+			let nel;
+			if( selitem ) {
+				nel = sens==kbNav.next ? selitem.nextElement() : selitem.prevElement();
+				nel = next_visible( nel, sens==kbNav.next );
+			}
+			else {
+				nel = sens==kbNav.next ? this._view.firstChild() : this._view.lastChild( );
+			}
 
 			if( nel ) {
 				const id = nel.getInternalData( "id" );
@@ -406,10 +416,12 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		this._multisel.clear( );
 	}
 
-	clearSelection( ) {
+	clearSelection( fireEvent = true ) {
 		if( this._multisel.size ) {
 			this._clearSelection( );
-			this.fire( "selectionChange", { selection: [], empty: true } );
+			if( fireEvent ) {
+				this.fire( "selectionChange", { selection: [], empty: true } );
+			}
 		}
 	}
 	
@@ -425,24 +437,21 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		this._view.clearContent( );
 		this._items = items ?? [];
 
-		let upsel = false;
+		let update_sel = false;
 
 		if( this._items.length ) {
 			const content = items.map( x => this.renderItem(x) );
 			this._view.setContent( content );
 
-			if( keepSel ) {
+			if( keepSel && oldSel.length>0 ) {
 				this.select( oldSel );
 			}
-			else {
-				upsel = true;
-			}
 		}
 		else {
-			upsel = true;
+			update_sel = oldSel.length>0;
 		}
 		
-		if( upsel ) {
+		if( update_sel ) {
 			this.setTimeout( "sel", 100, ( ) => {
 				this.fire( "selectionChange", { selection: [], empty: true } );
 			} );
@@ -573,4 +582,15 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	getSelection( ) {
 		return Array.from( this._multisel );
 	}
+
+	ensureSelectionVisible( ) {
+		const sels = Array.from( this._multisel.values() );
+		if( sels.length) {
+			const item = this._itemWithID( sels[0] );
+			item?.scrollIntoView( {
+				behavior: "instant",
+				block: "nearest"
+			} )
+		}
+	}
 }

package/src/components/menu/menu.module.scss

@@ -17,7 +17,7 @@
 @use "../shared.scss";
 
 :root {
-	--menu-background: var( --background-primary );
+	--menu-background: var( --background-ternary );
 	--menu-border: var( --border-hover );
 
 	--menuitem-color: var( --text-ternary );;
@@ -28,7 +28,7 @@
 }
 
 .x4menu {
-	@extend .shadow-lg;
+	@extend .shadow-xxl;
 
 	position: absolute;
 	overflow-y: auto;
@@ -39,6 +39,7 @@
 	
 	background-color: var(--menu-background);
 	border: 1px solid var(--menu-border);
+	border-left: 4px solid var( --accent-background );
 
 	max-height: calc( 100vh - 32px );
 	
@@ -69,6 +70,17 @@
 			}
 		}
 
+		&.danger #icon {
+			.fa-primary {
+				fill: var( --color-danger-a50 );
+			}
+
+			.fa-secondary {
+				fill: var( --color-danger-a30 );
+				opacity: 1;
+			}
+		}
+
 		#text {
 			@extend .flex;
 		}

package/src/components/menu/menu.ts

@@ -34,7 +34,7 @@ export interface MenuItem {
 	icon?: string;
 	text: string | UnsafeHtml;
 	menu?: Menu;
-	disabled?: true;
+	disabled?: boolean;
 	click?: DOMEventHandler;
 }
 

package/src/components/messages/messages.ts

@@ -98,6 +98,11 @@ export class MessageBox extends Dialog<DialogProps>
 }
 
 
+interface InputOptions {
+	password?: boolean;
+	trim?: boolean;
+}
+
 @class_ns( "x4" )
 export class InputBox extends Dialog<DialogProps>
 {
@@ -110,7 +115,10 @@ export class InputBox extends Dialog<DialogProps>
 		return input.getValue( );
 	}
 
-	private static _create( msg: string | UnsafeHtml, value: string, title: string ) {
+	private static _create( msg: string | UnsafeHtml, value: string, title: string, options?: InputOptions ) {
+
+		options = {trim: true, password: false, ...options };
+
 		const box = new InputBox({ 
 			modal: true,
 			title,
@@ -122,7 +130,7 @@ export class InputBox extends Dialog<DialogProps>
 							new Icon( { iconId: pen_icon }),
 							new VBox( { flex: 1, content: [
 								new Label( { text: msg } ),
-								new Input( { value, type: "text" } )
+								new Input( { value, type: options.password ? "password" : "text", trim: options.trim } )
 							]})
 						]
 					}),
@@ -138,11 +146,11 @@ export class InputBox extends Dialog<DialogProps>
 	 * idem with promise
 	 */
 
-	static async showAsync( msg: string | UnsafeHtml, value: string, title?: string ) : Promise<string> {
+	static async showAsync( msg: string | UnsafeHtml, value: string, title?: string, options?: InputOptions ) : Promise<string> {
 
-		return new Promise( (resolve, reject ) => {
+		return new Promise( (resolve, _reject ) => {
 
-			const box = this._create( msg, value, title );
+			const box = this._create( msg, value, title, options );
 		
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {

package/src/components/panel/panel.module.scss

@@ -51,10 +51,17 @@
 	border: none;
 	border-top: 1px solid var( --border );
 	margin-top: 1.5em;
+	border-radius: 0;
+	
+	padding: 0;
 
 	legend {
 		background: none;
 		top: -1.4em;
 		left: 0;
 	}
+
+	& >.body {
+		padding: 0;
+	}
 }

package/src/components/popup/popup.ts

@@ -21,6 +21,7 @@ import { Rect, Point, class_ns, asap } from '../../core/core_tools';
 import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
+import { getGlobalZoom, getScrollbarSize } from '../../core/core_tools.js';
 
 export interface PopupEvents extends ComponentEvents {
 	closed: ComponentEvent;
@@ -143,24 +144,27 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	 */
 
 	displayAt( x: number, y: number ) {
+		const zm = getGlobalZoom( );
+		
 		//TODO: check is already visible
 		this.setStyle( {
-			left: x+"px",
-			top: y+"px",
+			left: (x/zm)+"px",
+			top: (y/zm)+"px",
 		})
 
 		this._do_show( );	// to compute size
 
-		const rc = this.getBoundingRect( );
-		const width = window.innerWidth - 16;
-		const height = window.innerHeight - 16;
-		
-		if( rc.right>width ) {
-			this.setStyleValue( "left", width-rc.width );
+		const rc = this.getBoundingRect( ).scale( 1/zm );
+		const sbw = getScrollbarSize( );
+
+		const screen_width  = window.innerWidth - sbw;
+		if( rc.right>screen_width ) {
+			this.setStyleValue( "left", screen_width-rc.width );
 		}
 
-		if( rc.bottom>height ) {
-			this.setStyleValue( "top", height-rc.height );
+		const screen_height = window.innerHeight - sbw;
+		if( rc.bottom>screen_height ) {
+			this.setStyleValue( "top", screen_height-rc.height );
 		}
 	}
 

package/src/components/propgrid/propgrid.ts

@@ -73,7 +73,7 @@ export class PropertyGrid extends VBox {
 		if( props.groups ) {
 			this.setItems( props.groups );
 		}
-	};
+	}
 
 	/**
 	 * 

package/src/components/shared.scss

@@ -75,6 +75,10 @@
 	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+.shadow-xxl {
+	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+}
+
 
 @keyframes rotating {
 	from {

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