x4js 2.2.47 → 2.2.50

package/src/components/popup/popup.ts

@@ -22,6 +22,7 @@ import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
 import { getGlobalZoom, getScrollbarSize } from '../../core/core_tools.js';
+import { Application } from '../../core/core_application.js';
 
 export interface PopupEvents extends ComponentEvents {
 	closed: ComponentEvent;
@@ -46,7 +47,10 @@ function getRoot( ) {
 }
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --modal-mask-background
+ * ```
  */
 
 @class_ns( "x4" )
@@ -63,6 +67,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		}
 
 		// wait for element to create it's childs
+		// > setContent is in ctor
 		asap( ( ) => {
 			if( this.props.movable===true || (this.props.sizable && this.props.movable===undefined) ) {
 				const movers = this.queryAll( ".caption-element" );
@@ -133,13 +138,31 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	}
 
 	/**
-	 * s
+	 * stupid parameter
 	 */
 
-	displayCenter( center = true ) {
-		//this.displayNear( new Rect( window.innerWidth/2, window.innerHeight/2, 0, 0 ), "center middle" );
-		this.setClass( 'center', center );
+	displayCenter(  ) {
 		this._do_show( );		// to compute size
+
+		const fixpos = ( ) => {
+			console.log( "fixpos" );
+
+			const orc = this.getBoundingRect( );
+			this.setStyle( {
+				left: ((window.innerWidth - orc.width) / 2) +'px',
+				top:  ((window.innerHeight - orc.height) / 2) +'px',
+			} );
+
+			console.log( orc );
+		}
+
+		asap( fixpos );
+
+		const tkn = Application.instance( ).on( "resize", () => {
+			asap( fixpos );
+		} )
+
+		this.addCleanup( tkn.off );
 	}
 
 	/**
@@ -395,7 +418,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 
 
 /**
- * 
+ * @internal
  */
 
 export 
@@ -408,51 +431,54 @@ class CMover {
 
 		this.self = ref ? true : false;
 
-		x.addDOMEvent( "pointerdown", ( e: PointerEvent ) => {
+		const mouseDown = ( e: PointerEvent ) => {
 			if( this.self && e.target!=x.dom ) {
 				return;
 			}
 
 			x.setCapture( e.pointerId );
 
-			this.ref = ref ?? componentFromDOM( x.dom.parentElement );
+			if( !ref ) {
+				ref = componentFromDOM( x.dom.parentElement );
+			}
 
+			this.ref = ref;
 			this.delta = {x:0,y:0};
-			const rc = this.ref.getBoundingRect();
+			const rc = ref.getBoundingRect();
 
 			this.delta.x = e.pageX-rc.left;
 			this.delta.y = e.pageY-rc.top;
-		});
-
-		x.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
-			x.releaseCapture( e.pointerId );
-			this.ref = null;
-		});
+		}
 
-		x.addDOMEvent( "pointermove", ( e: PointerEvent ) => {
-			this._onMouseMove( e );
-		});
-	}
+		const mouseMove = ( e: PointerEvent ) => {
+			if( !this.delta ) {
+				return;
+			}
 
-	private _onMouseMove( e: PointerEvent ) {
-		if( !this.ref ) {
-			return;
+			const ref = this.ref
+			const pt = { x: e.pageX-this.delta.x, y: e.pageY-this.delta.y };
+			const rc = ref.getBoundingRect( );
+
+			ref.setStyle( {
+				top: pt.y+"",
+				left: pt.x+"",
+			} );
+			
+			e.preventDefault( );
+			e.stopPropagation( );
 		}
 
-		const pt = { x: e.pageX-this.delta.x, y: e.pageY-this.delta.y };
-		const rc = this.ref.getBoundingRect( );
-
-		let nr: any = {
-		};
+		const mouseUp = ( e: PointerEvent ) => {
+			x.releaseCapture( e.pointerId );
+			this.delta = null;
+		}
 
-		this.ref.setStyle( {
-			top: pt.y+"",
-			left: pt.x+"",
-		} );
-		
-		e.preventDefault( );
-		e.stopPropagation( );
+		x.addDOMEvent( "pointerdown", mouseDown );
+		x.addDOMEvent( "pointerup", mouseUp );
+		x.addDOMEvent( "pointermove", mouseMove );
 	}
+
+	
 }
 
 

package/src/components/progress/progress.ts

@@ -25,6 +25,14 @@ interface ProgressProps extends ComponentProps {
 	max: number;
 }
 
+/**
+ * @cssvar
+ * ```
+ * --progress-background
+ * --progress-color
+ * ```
+ */
+
 @class_ns( "x4" )
 export class Progress extends Component<ProgressProps> {
 

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

@@ -6,6 +6,8 @@
 
 :root {
 	--propertygrid-background: white;
+    --propertygrid-gadget-background: white;
+    --propertygrid-gadget-color: black;
 }
 
 .x4propertygrid {
@@ -92,10 +94,6 @@
 			flex-basis: 10px;
 	    	padding: 4px;
 
-			&>* {
-				width: 100%;
-			}
-
 			input {
 				background: rgba(255,255,255,0.6);
 			}
@@ -110,8 +108,16 @@
 			padding-left: 34px;
 		}
 
-		.cell:has(.x4button) {
+		.cell:has(.button) {
 			padding: 4px 40px;
 		}
+
+        .gadget {
+            &.x4button {
+                --button-background: var( --propertygrid-gadget-background );
+                --button-color: var( --propertygrid-gadget-color );
+                padding: 5px;
+            }
+        }
 	}
 }

package/src/components/propgrid/propgrid.ts

@@ -44,6 +44,7 @@ export interface PropertyValue {
     step?: number;	// for numbers
 	min?: number;
     max?: number;
+    gadgets?: Component[];
 }
 
 export interface PropertyGroup {
@@ -59,6 +60,13 @@ export interface PropertyProps extends ComponentProps {
 	groups: PropertyGroup[];
 }
 
+/**
+ * @cssvar
+ * ```
+ * --propertygrid-background
+ * ```
+ */
+
 @class_ns( "x4" )
 export class PropertyGrid extends VBox {
 
@@ -106,8 +114,6 @@ export class PropertyGrid extends VBox {
 
 	/**
 	 * Gets the html of a group header row
-	 * @param {string} displayName - The group display name
-	 * @param {boolean} isCollapsible - Whether the group should support expand/collapse
 	 */
 
 	makeGroupHeader( g: PropertyGroup ) {
@@ -241,6 +247,7 @@ export class PropertyGrid extends VBox {
 			use_hdr = false;
 			editor = new Button({ 
 				id: item.name,
+                cls: "button",
 				label: value as string, 
 				click: ( ) => {
 					item.callback?.( item.name, '' );
@@ -248,17 +255,17 @@ export class PropertyGrid extends VBox {
 			});
 		}
 		else {
-			editor = new Input({ 
-				type: 'text', 
-				id: item.name,
-				name: item.name, 
-				value: value as string,
-				focus: ( e: EvFocus ) => {
-					if( e.focus_out ) {
-						item.callback?.( item.name, (editor as Input).getValue() );
-					}
-				}
-			});
+            editor = new Input({ 
+                type: 'text', 
+                id: item.name,
+                name: item.name, 
+                value: value as string,
+                focus: ( e: EvFocus ) => {
+                    if( e.focus_out ) {
+                        item.callback?.( item.name, (editor as Input).getValue() );
+                    }
+                },
+            })
 		}
 		
 		let cls = 'row';
@@ -266,12 +273,25 @@ export class PropertyGrid extends VBox {
 			cls += ' ' + item.cls;
 		}
 
+        editor.addClass( "x4flex" );
+
+        const content: Component[] = [
+            editor
+        ]
+
+        if( item.gadgets ) {
+            item.gadgets.forEach( g => {
+                g.addClass( "gadget" );
+                content.push( g );
+            } );
+        }
+
 		return new HBox({
 			cls,
 			content: [
-				use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
-				new Component({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content: editor })
-			]
+                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 }),
+            ]
 		});
 	}
 

package/src/components/rating/rating.ts

@@ -42,6 +42,12 @@ export interface RatingProps extends ComponentProps {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --rating
+ * --rating-hover
+ * --rating-checked
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/select/select.ts

@@ -44,6 +44,7 @@ interface SelectEvents extends ComponentEvent {
 
 /**
  * simple select
+ * cf. Combobox
  */
 
 @class_ns( "x4" )

package/src/components/sizers/sizer.ts

@@ -24,7 +24,9 @@ import "./sizer.module.scss"
  */
 
 export interface EvSizeChange extends ComponentEvent {
-	size: number;
+	size: number;	// compat
+	width: number;
+	height: number;
 }
 
 interface CSizerEvent extends ComponentEvents {
@@ -111,28 +113,41 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		let nr: any = {};
 		let horz = true;
 
+		//const center = this._ref.hasClass("center");
+		//if( center ) {
+		//	const orc = this._ref.getBoundingRect( );
+		//	this._ref.removeClass("center");
+		//
+		//	nr.left = orc.left;
+		//	nr.top = orc.top;
+		//}
+
 		if( this._type.includes("top") ) {
 			nr.top = pt.y,
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type=="vsize-next" ) {
+		
+		if( this._type=="vsize-next" ) {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
-			//nr.top = rc.top;
+		
+		if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
 			nr.height = (pt.y-rc.top);
 			horz = false;
 		}
-		else if( this._type.includes("left") ) {
+		
+		if( this._type.includes("left") ) {
 			nr.left = pt.x;
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type=="hsize-next" ) {
+		
+		if( this._type=="hsize-next" ) {
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type.includes("right") || this._type=='hsize-prev' ) {
+		
+		if( this._type.includes("right") || this._type=='hsize-prev' ) {
 			nr.width = (pt.x-rc.left);
 		}
 
@@ -140,7 +155,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		//this._ref.setStyleValue( "flexGrow", 0 );
 
 		const nrc = this._ref.getBoundingRect( );
-		this.fire( "resize", { size: horz ? nrc.width : nrc.height })
+		this.fire( "resize", { size: horz ? nrc.width : nrc.height, width: nrc.width, height: nrc.height })
 
 		e.preventDefault( );
 		e.stopPropagation( );

package/src/components/slider/slider.ts

@@ -38,6 +38,13 @@ interface SliderProps extends ComponentProps {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --slider-track
+ * --slider-thumb-background
+ * --slider-thumb-border
+ * --slider-thumb-border-focus 
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/spreadsheet/spreadsheet.ts

@@ -202,7 +202,34 @@ export interface SpreadsheetProps extends ComponentProps {
  */
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --spreadsheet-background
+ * --spreadsheet-border
+ * --spreadsheet-header-cell-background
+ * --spreadsheet-header-cell-color
+ * --spreadsheet-header-cell-vline
+ * --spreadsheet-header-cell-border
+ * --spreadsheet-check-background
+ * --spreadsheet-check-color
+ * --spreadsheet-check-background-hover
+ * --spreadsheet-check-color-hover
+ * --spreadsheet-perc-background
+ * --spreadsheet-perc-color
+ * --spreadsheet-perc-background-hover
+ * --spreadsheet-perc-color-hover
+ * --spreadsheet-cell-color
+ * --spreadsheet-cell-color-sel
+ * --spreadsheet-cell-vline
+ * --spreadsheet-row-background
+ * --spreadsheet-row-odd-background
+ * --spreadsheet-row-border
+ * --spreadsheet-row-background-hover
+ * --spreadsheet-row-background-hover-sel
+ * --spreadsheet-row-background-sel
+ * --spreadsheet-row-color-sel
+ * --spreadsheet-fix-border
+ * ```
  */
 
 @class_ns("x4")

package/src/components/switch/switch.ts

@@ -32,6 +32,13 @@ interface SwitchProps extends ComponentProps {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --switch-border
+ * --switch-background
+ * --switch-background-disabled
+ * --switch-checked
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/tabs/tabs.ts

@@ -75,6 +75,7 @@ interface TablistEvents extends ComponentEvents {
 
 /**
  * bar containing buttons
+ * @internal
  */
 
 @class_ns( "x4" )
@@ -141,6 +142,11 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --tab-border-selected
+ * --tab-border-hover
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/tag/tag.ts

@@ -18,6 +18,17 @@ export interface TagProps extends ComponentProps {
 	icon?: string;
 }
 
+/**
+ * 
+ * @cssvar
+ * ```
+ * --tag-border
+ * --tag-border-focus
+ * --tag-selection
+ * --tag-color
+ * --tag-icon-color
+ * ```
+ */
 
 @class_ns( "x4" )
 export class Tag extends HBox<TagProps> {

package/src/components/textarea/textarea.ts

@@ -96,6 +96,12 @@ export class SimpleTextArea extends Component<TextAreaProps> {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --textarea-border
+ * --textarea-border-focus
+ * --textarea-selection
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/textedit/textedit.ts

@@ -69,6 +69,16 @@ interface TextEditProps extends InputProps {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --textedit-border
+ * --textedit-border-focus
+ * --textedit-required
+ * --textedit-btn-background
+ * --textedit-btn-color
+ * --textedit-btn-color-hover
+ * --textedit-color-disabled
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/tickline/tickline.ts

@@ -13,6 +13,15 @@ interface TickLineProps extends ComponentProps {
 	type: "bars" | "line";	
 }
 
+/**
+ * 
+ * @cssvar
+ * ```
+ * --tickline-axis-color
+ * --tickline-color
+ * --tickline-background
+ * ```
+ */
 
 export class TickLine extends Component<TickLineProps> {
 	

package/src/components/tooltips/tooltips.ts

@@ -75,7 +75,7 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 		tooltip = new Tooltip( { } );
 	}
 
-	timer.setTimeout( null, 300, ( ) => {
+	timer.setTimeout( "update", 300, ( ) => {
 		tooltip.setText( unsafeHtml(text) );
 
 		let y = mouse_pos.y;
@@ -90,11 +90,21 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 
 function closeTT( ) {
 	tooltip.show( false );
-	timer.clearTimeout( null );
+	timer.clearTimeout( "update" );
 }
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --tooltip-caption-background
+ * --tooltip-caption-color
+ * --tooltip-icon-background
+ * --tooltip-icon-color
+ * --tooltip-background
+ * --tooltip-color
+ * --tooltip-border
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/treeview/treeview.ts

@@ -69,6 +69,18 @@ interface TreeviewEvents extends ComponentEvents {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --treeview-background
+ * --treeitem-backgound-hover
+ * --treeitem-color-hover
+ * --treeitem-background-sel
+ * --treeitem-color-sel
+ * --treeview-item-color-sel-disabled
+ * --treeview-item-color-disabled
+ * --treeitem-backgound-active
+ * --treeitem-color-active
+ * ```
  */
 
 @class_ns( "x4" )
@@ -476,8 +488,10 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			this._selitem = undefined;
 		}
 
+        if( this._selection ) {
 			this._selection = undefined;
 			this.fire( "selectionChange", { selection: [], empty: true } );
+        }
 	}
 
 	/**

package/src/components/viewport/viewport.ts

@@ -19,6 +19,10 @@ import { Component, ComponentProps } from "../../core/component"
 
 import "./viewport.module.scss"
 
+/**
+ * 
+ */
+
 @class_ns( "x4" )
 export class Viewport extends Component {
 	constructor( props: ComponentProps ) {
@@ -26,6 +30,10 @@ export class Viewport extends Component {
 	}
 }
 
+/**
+ * 
+ */
+
 @class_ns( "x4" )
 export class ScrollView extends Component {
 	constructor( props: ComponentProps ) {