x4js 2.2.60 → 2.2.62

package/package.json

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

package/src/components/btngroup/btngroup.module.scss

@@ -53,9 +53,9 @@
             width: 1.5em;
         }
 
-            #icon {
-                height: 1.5em;
-                width: 1.5em;
+		#icon {
+			height: 1.5em;
+			width: 1.5em;
 		}
 
         &:not(:disabled) {

package/src/components/gridview/gridview.module.scss

@@ -110,20 +110,24 @@
 		left: 0;
 		top: 0;
 
-		.empty {
-			position: relative;
-			left: 50%;
-			top: 30px;
-			transform: translateX(-50%);
-			width: fit-content;
-
-			#icon {
-				height: 64px;
-				fill: var( --accent-background );
-				opacity: 50%;
-			}
-		}
-	}
+        &:has(.empty) {
+            width: 100% !important;
+        }
+
+        .empty {
+            position: absolute;
+            left: 50%;
+            top: 30px;
+            transform: translateX(-50%);
+            width: fit-content;
+
+            #icon {
+                height: 64px;
+                fill: var( --accent-background );
+                opacity: 50%;
+            }
+        }
+}
 
 	.row {
 		position: absolute;

package/src/components/listbox/listbox.ts

@@ -504,7 +504,7 @@ private _view: Viewport;
 			}
 
 			if( c instanceof Component ) {
-				c.addClass( "column" );
+				c.addClass(  `column ref-c${index+2}` );
 				return c;
 			}
 				

package/src/components/monaco/monaco.ts

@@ -4,11 +4,10 @@ import { Component, ComponentProps } from '../../core/component';
 import Monaco from './bin/monaco'; 
 import "./monaco.module.scss"
 
-export type IMonarchLanguage = monaco.languages.IMonarchLanguage;
-export type CompletionItem = monaco.languages.CompletionItem;
-export type CompletionItemProvider = monaco.languages.CompletionItemProvider;
-
-export { IRange, }
+export type IMonarchLanguage = Monaco.languages.IMonarchLanguage;
+export type CompletionItem = Monaco.languages.CompletionItem;
+export type CompletionItemProvider = Monaco.languages.CompletionItemProvider;
+export type IRange = Monaco.IRange;
 
 
 interface MonacoEditorProps extends ComponentProps {

package/src/components/popup/popup.ts

@@ -145,10 +145,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this._do_show( );		// to compute size
 
 		const fixpos = ( ) => {
-			const orc = this.getBoundingRect( );
+			const self = this.dom as HTMLElement;
+
 			this.setStyle( {
-				left: ((window.innerWidth - orc.width) / 2) +'px',
-				top:  ((window.innerHeight - orc.height) / 2) +'px',
+				left: ((document.body.offsetWidth - self.offsetWidth) / 2) +'px',
+				top:  ((document.body.offsetHeight - self.offsetHeight) / 2) +'px',
 			} );
 		}
 
@@ -174,13 +175,14 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
         this.setStyleValue( "left", x );
 		this.setStyleValue( "top", y );
 
-		//TODO: check is already visible
+        //TODO: check is already visible
 		this._do_show( );	// to compute size
 
-		const rc = this.getBoundingRect( ).scale( 1/zm );
+        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 );
 		}

package/src/components/propgrid/progrid.module.scss

@@ -101,7 +101,7 @@
 		&.odd:not(:disabled) {
 			background-color: var(--propertygrid-odd-background)
 		}
-
+		
 		&.odd:disabled {
 			background-color: var(--propertygrid-disabled-background)
 		}

package/src/components/sizers/sizer.ts

@@ -184,7 +184,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			return;
 		}
 		else {
-		this._ref.setStyle( nr );
+			this._ref.setStyle( nr );
 		}
 
 		const nrc = this._ref.getBoundingRect( );

package/src/components/tickline/tickline.module.scss

@@ -17,10 +17,16 @@
 :root {
 	--tickline-axis-color: var( --border );
 	--tickline-color: var( --accent-color );
+    --tickline-width: 1px;
 	--tickline-background: white;
 }
 
 .x4tickline {
 	position: relative;
 	background-color: var( --tickline-background );
+
+//    .tickline-line {
+//        stroke: var( --tickline-color );
+//        stroke-width: var( --tickline-width );
+//    }
 }

package/src/components/tickline/tickline.ts

@@ -1,9 +1,9 @@
 import { SvgBuilder, SvgComponent } from '../../core/core_svg';
 import { Color } from '../../core/core_colors';
 import { Component, ComponentProps } from '../../core/component';
-import { class_ns } from '../../core/core_tools';
 
 import "./tickline.module.scss"
+import { class_ns } from '../../core/core_tools';
 
 interface TickLineProps extends ComponentProps {
 	values: number[];
@@ -12,6 +12,10 @@ interface TickLineProps extends ComponentProps {
 	color?: Color;			
 	background?: Color;		
 	type: "bars" | "line";	
+    display?: {
+        tooltips?: boolean; // display values tootips
+        axis?: boolean;     // display axis
+    }
 }
 
 /**
@@ -22,6 +26,9 @@ interface TickLineProps extends ComponentProps {
  * --tickline-color
  * --tickline-background
  * ```
+ * 
+ * by default values are in percent.
+ * 
  */
 
 @class_ns( "x4" )
@@ -36,32 +43,39 @@ export class TickLine extends Component<TickLineProps> {
 	update( ) {
 		const props = this.props;
 		const vals = props.values;
+        const padding = 4;
 
 		if( !vals.length  ) {
 			this.clearContent( );
 			return;
 		}
 		
-		const rc = this.getBoundingRect( );
-		const min = props.min ?? 0;
+		const rc = this.getBoundingRect( ).moveTo(0,0).inflate( -padding );
+
+        const min = props.min ?? 0;
 		const max = props.max ?? 100;
 
-		const xmul = rc.width/vals.length;
+        if( max<=min || rc.width<=0 || rc.height<=0 ) {
+            this.clearContent( );
+            return;
+        }
+
+		const xmul = props.type=="line" ? rc.width/(vals.length-1) : rc.width/vals.length;
 		const ymul = rc.height/(max-min);
 
-		const b = rc.height;
+		const b    = rc.bottom;
 
 		const bld = new SvgBuilder( );
 
 		if( props.background ) {
-			bld.rect( 0, 0, rc.width, rc.height )
+			bld.rect( 0, 0, rc.width+padding*2, rc.height+padding*2 )
 				.fill( props.background.toHexString() );
 		}
 
-		if( min!=0 ) {
+		if( min!=0 || props.display?.axis ) {
 			bld.path( )
-				.moveTo( 0, b-(0-min)*ymul )
-				.lineTo( rc.width, b-(0-min)*ymul )
+				.moveTo( rc.left, b-(0-min)*ymul )
+				.lineTo( rc.right, b-(0-min)*ymul )
 				.stroke( "var(--tickline-axis-color)", 1 )
 				.antiAlias( false )
 		}
@@ -70,10 +84,10 @@ export class TickLine extends Component<TickLineProps> {
 			const pth = bld.path( );
 			for( let x=0; x<vals.length; x++ ) {
 				if( x==0 ) {
-					pth.moveTo( x*xmul, b-(vals[x]-min)*ymul );
+					pth.moveTo( rc.left+x*xmul, b-(vals[x]-min)*ymul );
 				}
 				else {
-					pth.lineTo( x*xmul, b-(vals[x]-min)*ymul );
+					pth.lineTo( rc.left+x*xmul, b-(vals[x]-min)*ymul );
 				}
 			}
 
@@ -82,14 +96,27 @@ export class TickLine extends Component<TickLineProps> {
 		}
 		else {
 			for( let x=0; x<vals.length; x++ ) {
-				bld.rect( x*xmul, b-(0-min)*ymul, xmul-1, b-vals[x]*ymul )
+				const r = bld.rect( rc.left+x*xmul, b-(vals[x]-min)*ymul, xmul-1, (vals[x]-min)*ymul )
 					.fill( props.color ? props.color.toHexString() : "var(--tickline-color)" )
-					.antiAlias( false );
+                    .antiAlias( false );
+
+                if( props.display?.tooltips ) {
+                    r.setAttr( 'tooltip', vals[x].toFixed(1) )
+                }
 			}
 		}
 
-
-
 		this.setContent( new SvgComponent( {width: "100%", height: "100%", svg: bld, attrs: { viewport:`0 ${props.min??0} ${vals.length} ${props.max??100}` } } ) );
 	}
+
+    setValues( values: number[], options? : { min: number, max: number } ) {
+
+        options = { min: 0, max: 100, ...options };
+
+        this.props.values = values;
+        this.props.min = options.min;
+        this.props.max = options.max;
+
+        this.update( );
+    }
 }

package/src/components/tooltips/tooltips.scss

@@ -39,7 +39,6 @@
 
 	border: 1px solid var( --tooltip-border ); 
 	background-color: var( --tooltip-background );
-
     width: max-content;
 
 	.x4icon {

package/src/core/component.ts

@@ -865,7 +865,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 
 	isVisible( ) {
-		return (this.dom as HTMLElement).offsetParent !== null;
+		return this.dom.isConnected && this.dom.checkVisibility( {checkVisibilityCSS: true, } );
 	}
 
 	/**

package/src/core/core_data.ts

@@ -119,17 +119,17 @@ export namespace data {
 	**/
 
 	export function id( ) {
-	return ( ownerCls: any, fldName: string ) => {
-		let metas = _getMetas( ownerCls );
-		metas.fields.push( {
-			name: fldName,
-			type: 'any',
-			required: true,
-		});
-
-		metas.id = fldName;
-	}
-}
+        return ( ownerCls: any, fldName: string ) => {
+            let metas = _getMetas( ownerCls );
+            metas.fields.push( {
+                name: fldName,
+                type: 'any',
+                required: true,
+            });
+
+            metas.id = fldName;
+        }
+    }
 
 	/**
 	 * @ignore
@@ -254,6 +254,12 @@ export namespace data {
 
 export class DataModel<T = any> {
 
+    constructor( fields?: FieldInfo[] ) {
+        if( fields && fields.length ) {
+            this.addField( ...fields );
+        }
+    }
+
     /**
      * dynamic DataModel
      */

package/src/core/core_svg.ts

@@ -845,6 +845,9 @@ export class SvgGroup extends SvgItem {
 			h = -h;
 		}
 
+        console.assert( w>=0 );
+        console.assert( h>=0 );
+
 		const shape = new SvgShape( 'rect' );
 		shape.setAttr( 'x', num(x)+'' );
 		shape.setAttr( 'y', num(y)+'' );

package/src/core/core_tools.ts

@@ -221,7 +221,7 @@ export class Rect implements IRect {
 		this.left -= dx;
 		this.width += dx+dx;
 		this.top -= dy;
-		this.width += dy+dy;
+		this.height += dy+dy;
 
 		return this;
 	}
@@ -234,6 +234,13 @@ export class Rect implements IRect {
 
 		return this;
 	}
+
+    moveTo( x: number, y: number ) {
+        this.left = x;
+        this.top = x;
+
+        return this;
+    }
 }
 
 /**
@@ -984,11 +991,11 @@ export function setWaitCursor(wait: boolean) {
 
 const FOCUSABLE = [
 	'button:not([tabindex="-1"])',
-		'[href]',
+	'[href]',
 	'input',
 	'select',
 	'textarea',
-		'[tabindex]:not([tabindex="-1"])'
+	'[tabindex]:not([tabindex="-1"])'
 ]	.map( x => x+':not(:disabled):not([inert])' )
 	.join( ',' );
 

package/src/x4.d.ts

@@ -1,20 +1,33 @@
-/** 
+/**
  *  ___  ___ __
  *  \  \/  /  / _
  *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.2
- * 
- * @file x4.d.ts
- * @author Etienne Cochard 
- * 
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file x4.ts
+ * @author Etienne Cochard
+ *
  * @copyright (c) 2026 R-libre ingenierie
  *
- * Use of this source code is governed by an MIT-style license 
+ * Use of this source code is governed by an MIT-style license
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
-
-declare module "*.svg" {
-  	const content: string;
-  	export default content;
-}
+export * from "./core/component";
+export * from "./core/core_application";
+export * from "./core/core_colors";
+export * from "./core/core_data";
+export * from "./core/core_dom";
+export * from "./core/core_dragdrop";
+export * from "./core/core_element";
+export * from "./core/core_events";
+export * from "./core/core_i18n";
+export * from "./core/core_pdf";
+export * from "./core/core_react";
+export * from "./core/core_router";
+export * from "./core/core_state";
+export * from "./core/core_styles";
+export * from "./core/core_svg";
+export * from "./core/core_tools";
+export * from "./components/components";
+import "./x4.scss";