x4js 2.2.60 → 2.2.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.60",
+  "version": "2.2.61",
   "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/popup/popup.ts

@@ -174,13 +174,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.ts';
 
 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( ',' );