x4js 2.2.72 → 2.2.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.72",
+  "version": "2.2.74",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/boxes/boxes.ts

@@ -424,7 +424,7 @@ export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEven
      */
 
 	setRowCount( n: number ) {
-		this.setStyleValue( "gridTemplateRows", `repeat(${n})` );
+		this.setStyleValue( "gridTemplateRows", `repeat(${n},1fr)` );
 	}
 
 	/**
@@ -433,7 +433,7 @@ export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEven
      */
 
 	setColCount( n: number ) {
-		this.setStyleValue( "gridTemplateColumns", `repeat(${n})` );
+		this.setStyleValue( "gridTemplateColumns", `repeat(${n},1fr)` );
 	}
 
 	/**
@@ -442,7 +442,7 @@ export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEven
      */
 
 	setTemplate( t: string[] ) {
-		this.setAttribute( "grid-template-area", t.map( x => '"' + x + '"' ).join(" ") );
+		this.setAttribute( "grid-template-areas", t.map( x => '"' + x + '"' ).join(" ") );
 	}
 
 	/**

package/src/components/canvas/canvas.ts

@@ -93,11 +93,11 @@ export class Canvas extends Component<CanvasProps, CanvasEventMap> {
 	 * redraw the canvas (force a paint)
 	 */
 
-	private $update_rep = 0;
+	#update_rep = 0;
 	public redraw(wait?: number) {
 
 		if (wait !== undefined) {
-			if( ++this.$update_rep>=20 ) {
+			if( ++this.#update_rep>=20 ) {
 				this.clearTimeout( 'update' );
 				this._paint( );
 			}
@@ -115,67 +115,63 @@ export class Canvas extends Component<CanvasProps, CanvasEventMap> {
 	 * 
 	 */
 
+	#pixel_ratio = -1		// can change when moving to another screen
 	private _paint() {
-		this.$update_rep = 0;
+		this.#update_rep = 0;
 
-		let dom = this.dom;
-		if (!this.isVisible() ) {
+		if (!this.isVisible()) {
 			return;
 		}
 
-		//const canvas = this.m_canvas.dom as HTMLCanvasElement;
+		const dom = this.dom;
 		const w = dom.clientWidth;
 		const h = dom.clientHeight;
 
+		if (!w || !h) {
+			return;
+		}
+
 		const ctx = this.getContext();
-		if (w != this.m_iwidth || h != this.m_iheight) {
-			// adjustment for HDPI
-			let devicePixelRatio = window.devicePixelRatio || 1;
-			let backingStoreRatio = (<any>ctx).webkitBackingStorePixelRatio ||
-				(<any>ctx).mozBackingStorePixelRatio ||
-				(<any>ctx).msBackingStorePixelRatio ||
-				(<any>ctx).oBackingStorePixelRatio ||
-				(<any>ctx).backingStorePixelRatio || 1;
-
-			let canvas = this.canvas;
-
-			if ( this.m_scale != 1.0 ) { //devicePixelRatio !== backingStoreRatio || this.m_scale != 1.0) {
-				let ratio = 1;	//devicePixelRatio / backingStoreRatio,
-				const rw = w * ratio;
-				const rh = h * ratio;
-
-				canvas.setAttribute('width', '' + rw);
-				canvas.setAttribute('height', '' + rh);
-				canvas.setStyleValue('width', w);
-				canvas.setStyleValue('height', h);
-
-				ratio *= this.m_scale;
-				ctx.scale(ratio, ratio);
-			}
-			else {
-				canvas.setAttribute('width', '' + w);
-				canvas.setAttribute('height', '' + h);
-				canvas.setStyleValue('width', w);
-				canvas.setStyleValue('height', h);
-				ctx.scale(1, 1);
-			}
+		const ratio = window.devicePixelRatio || 1;
+
+		if (
+			w !== this.m_iwidth ||
+			h !== this.m_iheight ||
+			ratio !== this.#pixel_ratio
+		) {
+			const canvas = this.canvas;
+
+			// CSS size stays in logical pixels, while the backing buffer
+			// uses the physical screen resolution.
+			canvas.setAttribute('width', '' + Math.round(w * ratio));
+			canvas.setAttribute('height', '' + Math.round(h * ratio));
+			canvas.setStyleValue('width', w);
+			canvas.setStyleValue('height', h);
 
 			this.m_iwidth = w;
 			this.m_iheight = h;
+			this.#pixel_ratio = ratio;
 		}
 
-		if (w && h) {
-			let cc = createPainter(ctx, w, h);
-			if (this.props.clear) {
-				
-				cc.clearRect(0,0,w/this.m_scale,h/this.m_scale);
-			}
+		// setTransform avoids accumulating transformations between paints.
+		const scale = ratio * this.m_scale;
+		ctx.setTransform(scale, 0, 0, scale, 0, 0);
 
-			cc.save();
-			cc.translate(-0.5, -0.5);
-			this.paint(cc);
-			cc.restore();
+		const cc = createPainter(ctx, w, h);
+
+		if (this.props.clear) {
+			cc.clearRect(
+				0,
+				0,
+				w / this.m_scale,
+				h / this.m_scale
+			);
 		}
+
+		cc.save();
+		cc.translate(-0.5, -0.5);
+		this.paint(cc);
+		cc.restore();
 	}
 
 	protected paint(ctx: CanvasEx ) {

package/src/components/form/form.ts

@@ -157,7 +157,7 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 
 			for( let name in result ) {
 				if( new_values[name] != result[name] ) {
-					const x = this.query( `input[${name}"]` );
+					const x = this.query( `input[name="${name}"]` );
 					const ifx = x.queryInterface( "form-element" ) as IFormElement;
 					ifx.setRawValue( new_values[name] );
 				}

package/src/components/gridview/gridview.ts

@@ -391,15 +391,15 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		}
 	}
 
+	/*
 	setColumns( columns: GridColumn[] ) {
 		this._columns = columns.map(x => x);
+
 		if( this.dom ) {
-			
 			this._updateFlexs( );
 			
 			// Rebuild headers
 			if (this._fheader) {
-				/*
 				const newFixedHeader = this._buildColHeader(true);
 				this._fheader.setContent(newFixedHeader.getChildren());
 				// On doit remplacer _fheader dans le DOM ou mettre à jour son contenu
@@ -444,14 +444,13 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				}
 				
 				this.setContent(content);
-				*/
-				console.assert( false, "TODO" );
 			}
 
 			this._computeFullSize( );
 			this._update( true );
 		}
 	}
+	*/
 
 	getView( ): DataView {
 		return this._dataview;
@@ -862,7 +861,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				continue;
 			}
 
-			const content = this._renderCell(rec, cdata.id, [cdata.type] );
+			const content = this._renderCell(rec, cdata, [cdata.type] );
 
 			let align = "start";
 			switch (cdata.align) {

package/src/components/propgrid/propgrid.ts

@@ -38,7 +38,7 @@ export interface PropertyValue {
 	name?: string;
 	value: IValue | IValueCB;
 	options?: ListItem[];
-	callback: ( name: string, value: any ) => void;
+	callback?: ( name: string, value: any ) => void;
 	live?: boolean;	// for live update 
 	cls?: string;
     step?: number;	// for numbers
@@ -347,6 +347,12 @@ export class PropertyGrid extends VBox {
 				editor.setNumValue( value as number, -2 );
 			}
 		}
+		else if (item.type === 'label') {
+			const label = this.root.query<Label>( '#'+item.name );
+			if( label ) {
+				label.setText( value );
+			}
+		}
 		else {
 			const editor = this.root.query<Input>( '#'+item.name );
 			if( editor ) {

package/src/components/tickline/tickline.ts

@@ -5,7 +5,7 @@ import { Component, ComponentProps } from '../../core/component';
 import "./tickline.module.scss"
 import { class_ns } from '../../core/core_tools';
 
-interface TickLineProps extends ComponentProps {
+export interface TickLineProps extends ComponentProps {
 	values: number[];
 	min?: number;
 	max?: number;
@@ -45,7 +45,8 @@ export class TickLine extends Component<TickLineProps> {
 		const vals = props.values;
         const padding = 4;
 
-		if( !vals.length  ) {
+		if( (props.type=='bars' && vals.length==0) || 
+			(props.type=='line' && vals.length<2) ) {
 			this.clearContent( );
 			return;
 		}

package/src/components/treeview/treeview.ts

@@ -52,7 +52,7 @@ export interface TreeItem extends ListItem {
 	open?: boolean;
 }
 
-interface TreeviewProps extends Omit<ComponentProps,"content"> {
+export interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	items: TreeItem[];
 	footer?: Component;
 	emptyMsg?: string;
@@ -61,7 +61,7 @@ interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	click?: EventCallback<EvClick>;
 }
 
-interface TreeviewEvents extends ComponentEvents {
+export interface TreeviewEvents extends ComponentEvents {
 	selectionChange?: EvSelectionChange;
 	dblClick?: EvDblClick;
 	click?: EvClick;

package/src/core/core_data.ts

@@ -315,7 +315,7 @@ export class DataModel<T = any> {
 
 		fields.forEach( (fi) => {
 			if( fi.required && !this.getField(fi.name,record) ) {
-				if( errs ) {
+				if( !errs ) {
 					errs = [];
 				}
 				

package/src/core/core_element.ts

@@ -260,6 +260,7 @@ export class CoreElement<E extends EventMap = EventMap> {
 	cleanUp( ) {
 		this.clearTimeouts( );
 		this.#cleanup?.forEach( x => x() );
+		this.#cleanup.length = 0;
 	}
 
 	// :: EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

package/src/core/core_i18n.ts

@@ -26,8 +26,6 @@
     translations: any;
 }
 
-const sym_lang = Symbol( "i18n" );
-
 let languages: Record<string,Language> = {
 };
 
@@ -211,7 +209,46 @@ function _findBaseTrans( base: any ) {
 	return undefined;
 }
 
-export let _tr: Partial<typeof fr> = {};
+/**
+ * current language state
+ */
+
+const current = {
+	name: "",
+	translations: {} as any,
+};
+
+/**
+ * stable translation object: forwards every access to the current language,
+ * so references to _tr stay valid after selectLanguage
+ */
+
+const tr_handler: ProxyHandler<any> = {
+	get( _target, prop ) {
+		return current.translations[prop];
+	},
+
+	has( _target, prop ) {
+		return prop in current.translations;
+	},
+
+	ownKeys( ) {
+		return Reflect.ownKeys( current.translations );
+	},
+
+	getOwnPropertyDescriptor( _target, prop ) {
+		const value = current.translations[prop];
+
+		if( value === undefined ) {
+			return undefined;
+		}
+
+		return { value, enumerable: true, configurable: true };
+	},
+};
+
+export const _tr: Partial<typeof fr> = new Proxy( {}, tr_handler );
+ 
 
 /**
  * select the given language as current
@@ -224,8 +261,9 @@ export function selectLanguage( name: string ) {
 		return;
 	}
 
-	_tr = languages[name].translations;
-	(_tr as any)[sym_lang] = name;
+	current.name = name;
+	current.translations = languages[name].translations;
+
 	return _tr;
 }
 
@@ -234,7 +272,7 @@ export function selectLanguage( name: string ) {
  */
 
 export function getCurrentLanguage( ): string {
-	return (_tr as any)[sym_lang];
+	return current.name;
 }
 
 /**
@@ -359,8 +397,8 @@ let en = {
 		day_short: [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ],
 		day_long: [ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' ],
 
-		month_short: [ 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jui', 'aug', 'sep', 'oct', 'nov', 'dec' ],
-		month_long: [ 'january', 'february', 'march', 'april', 'mau', 'june', 'jully', 'august', 'september', 'october', 'november', 'december' ],
+		month_short: [ 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec' ],
+		month_long: [ 'january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december' ],
 
 		property: 'Property',
 		value: 'Value',