x4js 2.2.59 → 2.2.61

package/package.json

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

@@ -4,6 +4,12 @@ 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, }
+
 
 interface MonacoEditorProps extends ComponentProps {
 	language: "typescript" | "javascript" | "json" | "css" | "html" | string;

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.module.scss

@@ -17,6 +17,7 @@
 
 .x4csizer {
 	position: absolute;
+	touch-action: none;
 
 	@mixin horz {
 		left: 0;

package/src/components/sizers/sizer.ts

@@ -89,6 +89,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			}
 
 			this.fire( "start", { })
+			e.preventDefault( );
 		});
 
 		this.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
@@ -183,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/tabs/tabs.module.scss

@@ -65,3 +65,9 @@
 	}
 }
 
+.x4tabs.inline {
+	&> .body {
+		border: none;
+		border-top: 1px solid var( --border );
+	}
+}

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;
 }
 
-.x-tick-line {
+.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

@@ -3,6 +3,7 @@ import { Color } from '../../core/core_colors';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./tickline.module.scss"
+import { class_ns } from '../../core/core_tools.ts';
 
 interface TickLineProps extends ComponentProps {
 	values: number[];
@@ -11,6 +12,10 @@ interface TickLineProps extends ComponentProps {
 	color?: Color;			
 	background?: Color;		
 	type: "bars" | "line";	
+    display?: {
+        tooltips?: boolean; // display values tootips
+        axis?: boolean;     // display axis
+    }
 }
 
 /**
@@ -21,8 +26,12 @@ interface TickLineProps extends ComponentProps {
  * --tickline-color
  * --tickline-background
  * ```
+ * 
+ * by default values are in percent.
+ * 
  */
 
+@class_ns( "x4" )
 export class TickLine extends Component<TickLineProps> {
 	
 	constructor( props: TickLineProps ) {
@@ -34,30 +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.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, 0-min )
-				.lineTo( rc.width, 0-min )
+				.moveTo( rc.left, b-(0-min)*ymul )
+				.lineTo( rc.right, b-(0-min)*ymul )
 				.stroke( "var(--tickline-axis-color)", 1 )
 				.antiAlias( false )
 		}
@@ -66,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, (vals[x]-min)*ymul );
+					pth.moveTo( rc.left+x*xmul, b-(vals[x]-min)*ymul );
 				}
 				else {
-					pth.lineTo( x*xmul, (vals[x]-min)*ymul );
+					pth.lineTo( rc.left+x*xmul, b-(vals[x]-min)*ymul );
 				}
 			}
 
@@ -78,14 +96,27 @@ export class TickLine extends Component<TickLineProps> {
 		}
 		else {
 			for( let x=0; x<vals.length; x++ ) {
-				bld.rect( x*xmul, (0-min)*ymul, xmul-1, 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_colors.ts

@@ -88,7 +88,7 @@ export class Color {
 		if( value.startsWith('#') ) {
 			if (value.length == 7 && /#[0-9a-fA-F]{6}/.test(value)) {
 				const hex = parseInt(value.slice(1), 16);
-				return this.setRgb( hex >> 16, hex >> 8, hex, 1.0 );
+				return this.setRgb( (hex >> 16)&0xff, (hex >> 8)&0xff, (hex)&0xff, 1.0 );
 			}
 	
 			if (value.length == 4 && /#[0-9a-fA-F]{3}/.test(value)) {
@@ -98,7 +98,7 @@ export class Color {
 
 			if (value.length == 9 && /#[0-9a-fA-F]{8}/.test(value)) {
 				const hex = parseInt(value.slice(1), 16) >>> 0;
-				return this.setRgb( hex >> 24, hex >> 16, hex >> 8, (hex & 0xFF) / 255.0 );
+				return this.setRgb( (hex >> 24)&0xff, (hex >> 16)&0xff, (hex >> 8)&0xff, (hex & 0xFF) / 255.0 );
 			}
 		}
 		else {
@@ -131,7 +131,7 @@ export class Color {
 			else {
 				const xx = CSS_COLORS[value];
 				if( xx!==undefined ) {
-					return this.setRgb( xx>>16, xx>>8, xx, 1.0 );
+					return this.setRgb( (xx>>16)&0xff, (xx>>8)&0xff, (xx)&0xff, 1.0 );
 				}
 				else if( value=="transparent" ) {
 					return this.setRgb( 0, 0, 0, 0 );

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( ',' );