x4js 2.3.24 → 2.3.25

package/src/components/propgrid/propgrid.ts

@@ -90,6 +90,9 @@ export class PropertyGrid extends VBox {
 	private root: Component;
 	private groups: PropertyGroup[];
 
+	// the editor of each property, by its name: no id, a name is not unique in a page
+	private editors = new Map<string, Component>( );
+
 	constructor(props: PropertyProps) {
 		super(props);
 
@@ -118,6 +121,8 @@ export class PropertyGrid extends VBox {
 
 	setItems( _grps: PropertyGroup[] ) {
 
+		this.editors.clear( );
+
 		if( !_grps || _grps.length==0 ) {
 			this.root.clearContent( );
 			return;
@@ -218,7 +223,6 @@ export class PropertyGrid extends VBox {
 		if (item.type === 'boolean') {
 			editor = new Input({ 
 				type: "checkbox", 
-				id: item.name,
 				//name: item.name, 
 				checked: value as boolean, 
 				dom_events: {
@@ -232,7 +236,6 @@ export class PropertyGrid extends VBox {
 		else if (item.type === 'options') {
 			editor = new Select( {
 				value: value as ListboxID,
-				id: item.name,
 				items: item.options,
 				//name: item.name,
 				change: ( e: EvChange ) => {
@@ -243,20 +246,23 @@ export class PropertyGrid extends VBox {
 		else if (item.type === 'password') {
 			editor = new Input({ 
 				type: 'password',
-				id: item.name,
-				//name: item.name, 
-				value: String(value), 
+				//name: item.name,
+				value: String(value),
 				focus: ( e: EvFocus ) => {
 					if( e.focus_out ) {
 						item.callback?.( item.name, (editor as Input).getValue() );
 					}
+				},
+				change: ( ) => {
+					if( item.live ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
 				}
 			});
 		}
 		else if (item.type === 'number') {
 			editor = new Input({ 
 				type: 'number', 
-				id: item.name,
 				//name: item.name, 
 				value: String(value),
 				step: item.step,
@@ -276,7 +282,6 @@ export class PropertyGrid extends VBox {
 		}
 		else if (item.type === 'color') {
 			editor = new ColorInput({
-				id: item.name,
 				color: value as string,
 				format: "hex",
 				picker: true,
@@ -289,14 +294,12 @@ export class PropertyGrid extends VBox {
 		}
 		else if (item.type === 'label') {
 			editor = new Label({
-				id: item.name,
 				text: value as string,
 			});
 		}
 		else if (item.type === 'button') {
 			use_hdr = false;
 			editor = new Button({ 
-				id: item.name,
                 cls: "button",
 				label: value as string, 
 				click: ( ) => {
@@ -307,7 +310,6 @@ export class PropertyGrid extends VBox {
 		else {
             editor = new Input({ 
                 type: 'text', 
-                id: item.name,
                 //name: item.name, 
                 value: value as string,
                 focus: ( e: EvFocus ) => {
@@ -315,8 +317,17 @@ export class PropertyGrid extends VBox {
                         item.callback?.( item.name, (editor as Input).getValue() );
                     }
                 },
+				change: ( ) => {
+					if( item.live ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
+				}
             })
 		}
+
+		if( item.name ) {
+			this.editors.set( item.name, editor );
+		}
 		
 		let cls = 'row';
 		if( item.cls ) {
@@ -340,7 +351,7 @@ export class PropertyGrid extends VBox {
 			cls,
 			content: [
                 use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
-                new HBox({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content }),
+                new HBox({ cls: 'cell', tag: "label", content }),
             ]
 		});
 	}
@@ -352,45 +363,28 @@ export class PropertyGrid extends VBox {
 	setPropValue( name: string, value: any ) {
 		const all = this.groups.flatMap( x => [ ...x.items ] ) ;
 		const item = all.find( x => x.name==name );
-		if( !item ) {
+		const editor = this.editors.get( name );
+		if( !item || !editor ) {
 			return;
 		}
 
 		if (item.type === 'boolean') {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setCheck( value as boolean );
-			}
+			(editor as Input).setCheck( value as boolean );
 		}
 		else if (item.type === 'options') {
-			const editor = this.root.query<Select>( '#'+item.name );
-			if( editor ) {
-				editor.setValue( value as string );
-			}
+			(editor as Select).setValue( value as string );
 		}
 		else if (item.type === 'number') {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setNumValue( value as number, -2 );
-			}
+			(editor as Input).setNumValue( value as number, -2 );
 		}
 		else if (item.type === 'color') {
-			const editor = this.root.query<ColorInput>( '#'+item.name );
-			if( editor ) {
-				editor.setColor( value as string );
-			}
+			(editor as ColorInput).setColor( value as string );
 		}
 		else if (item.type === 'label') {
-			const label = this.root.query<Label>( '#'+item.name );
-			if( label ) {
-				label.setText( value );
-			}
+			(editor as Label).setText( value );
 		}
 		else {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setValue( value as string );
-			}
+			(editor as Input).setValue( value as string );
 		}
 	}
 

package/src/components/tooltips/tooltips.ts

@@ -32,6 +32,15 @@ let mouse_pos: Point = {x:0, y:0 };
 
 const timer = new Timer( );
 
+/**
+ * the tooltips are shown once this is called: the text of the attribute "tooltip" (the prop
+ * tooltip of a component), or the one getTip( ) of a "tip-handler" gives.
+ * This text is shown as html: a text that comes from a user is escaped by the application,
+ * with sanitizeHtml( text ).
+ * @example
+ * new Button( { label: "Open", tooltip: `Open <b>${sanitizeHtml( file.name )}</b>` } );
+ */
+
 export function initTooltips( ) {
 
 	document.addEventListener( "mouseenter", ( ev: MouseEvent ) => {

package/src/core/core_application.ts

@@ -255,7 +255,11 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 	private _setupKeyboard( ) {
 		
 		document.addEventListener( "keydown", (ev) => {
-			if( ev.key=="Tab" || ev.key=="Enter" ) {
+			// Enter in a text of several lines is a new line, not the next field
+			const target = ev.target as HTMLElement;
+			const multiline = target.tagName==="TEXTAREA" || target.isContentEditable;
+
+			if( ev.key=="Tab" || ( ev.key=="Enter" && !multiline ) ) {
 				if( this.focusNext( !ev.shiftKey ) ) {
 					ev.preventDefault( );
 				}
@@ -263,7 +267,8 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 
 			// The focus is nowhere: the shortcuts of the view the user worked in last.
 			// (when it is in a view, the view has seen the key before us)
-			if( ev.target===document.body && this._active?.owner.dom.isConnected && this._active.shortcuts.handle( ev ) ) {
+			// (a view hidden, in a tab not shown: its shortcuts sleep)
+			if( ev.target===document.body && this._active?.owner.isVisible( ) && this._active.shortcuts.handle( ev ) ) {
 				return;
 			}
 

package/src/core/core_events.ts

@@ -159,6 +159,8 @@ export class EventSource<E extends EventMap = EventMap > {
 
 	/**
 	 * Dispatches an event with a given name and payload to all registered listeners.
+	 * A listener that throws: its error goes to console.error, the next listeners are
+	 * called, and fire returns normally.
 	 * @param name - The name of the event to fire (must be a key in `E`).
 	 * @param evx - The event payload (event object) to pass to the listeners.
 	 */
@@ -192,14 +194,24 @@ export class EventSource<E extends EventMap = EventMap > {
 				ev.stopPropagation = stopPropagation;
 			}
 
+			// a listener that throws stops neither the others nor the one that fires
+			const call = ( listener: EventCallback ) => {
+				try {
+					listener( ev );
+				}
+				catch( e ) {
+					console.error( e );
+				}
+			};
+
 			// small optimisation
 			if (listeners.length == 1) {
-				listeners[0](ev);
+				call( listeners[0] );
 			}
 			else {
 				const temp = listeners.slice();
 				for (let i = 0, n = temp.length; i < n; i++) {
-					temp[i](ev);
+					call( temp[i] );
 					if (ev.propagationStopped) {
 						break;
 					}

package/src/core/core_i18n.ts

@@ -336,6 +336,13 @@ let fr = {
 			search: 'Rechercher un paramètre',
 			nomatch: 'Aucun paramètre trouvé',
 		},
+
+		progression: {
+			error: '{0} erreur',
+			errors: '{0} erreurs',
+			warning: '{0} avertissement',
+			warnings: '{0} avertissements',
+		},
 	}
 };
 
@@ -406,6 +413,13 @@ let en = {
 			search: 'Search settings',
 			nomatch: 'No setting found',
 		},
+
+		progression: {
+			error: '{0} error',
+			errors: '{0} errors',
+			warning: '{0} warning',
+			warnings: '{0} warnings',
+		},
 	}
 };
 
@@ -476,6 +490,13 @@ let es = {
 			search: 'Buscar un ajuste',
 			nomatch: 'Ningún ajuste encontrado',
 		},
+
+		progression: {
+			error: '{0} error',
+			errors: '{0} errores',
+			warning: '{0} advertencia',
+			warnings: '{0} advertencias',
+		},
 	}
 };
 
@@ -546,6 +567,13 @@ let de = {
 			search: 'Einstellungen durchsuchen',
 			nomatch: 'Keine Einstellung gefunden',
 		},
+
+		progression: {
+			error: '{0} Fehler',
+			errors: '{0} Fehler',
+			warning: '{0} Warnung',
+			warnings: '{0} Warnungen',
+		},
 	}
 };