x4js 2.3.29 → 2.3.30

package/README.md

@@ -4,7 +4,7 @@
 </picture>
 
 # x4js
-**A TypeScript framework for people who build applications, not markup.**
+**A full TypeScript framework for web and desktop applications.**
 
 ## Home page
 see [X4 home page](https://x4js.org)

package/aicontext.md

@@ -1335,7 +1335,8 @@ class Tabs extends Box {
 
 ```ts
 interface PopupProps extends ComponentProps {
-  autoClose?: boolean | string             // true, or a group name
+  autoClose?: boolean | string             // true, or a group name: closed by a press outside; while it is shown,
+                                           //   a wheel outside every popup is ignored (the page does not scroll)
   sizable?: boolean; movable?: boolean
 }
 class Popup extends Box {
@@ -1835,13 +1836,13 @@ by the browser, in its own locale, whatever this one.
 /* the globals the components use: --background-primary / -secondary / -ternary / -hover / -active / -input,
    --text-primary / -secondary / -ternary, --border / -light / -hover / -focus, --accent-background / -hover /
    -focus / -active / -light, --accent-color (the text on the accent), --disabled-*, --icon-color / -active,
-   --alert-*, --warning-*, --success-* */
+   --alert-*, --warning-*, --success-*, --shadow-color (the shadow of what floats: dialog, list, notification, tooltip) */
 ```
 // The greys are mixes of a0 and a100: a theme that reverses the scale gets them light on dark.
 // Each component reads its own variables (the @cssvar of its class), which point to these globals:
 //   a theme redefines the globals, or one variable of a component.
 // Themes: Application.setTheme(name) puts the class x4theme-<name> on <html>. "" is the light theme (by default),
-//   "dark" the dark theme of x4 (the greys of VS Code Dark Modern, its blues from #5796ca). An application adds its own theme in its css,
+//   "dark" the dark theme of x4 (the greys of VS Code Dark Modern, its blues from #2d6fa5: the accent #245883). An application adds its own theme in its css,
 //   html.x4theme-pink { --color-primary-a0: ...; ... }, then Application.setTheme("pink").
 // The font: --font-name and --font-size (14px), on :root (normalize.scss); body takes them. To change the size
 //   of the text, set --font-size ( :root { --font-size: 13px } ), not the font-size of <html>: the components
@@ -2218,6 +2219,8 @@ class CMover {
 }
 createPainter(c2d: CanvasRenderingContext2D, w: number, h: number): CanvasEx   // Canvas painter
 initTooltips(): void                                   // initialize the global tooltip system
+// a tooltip: 30vw wide at most (--tooltip-max-width; none: the width of its text); it goes at a click, and when its
+//   element is removed or hidden (checked every second while it is shown)
 ```
 
 JSX, in `.tsx` files: in tsconfig.json `"jsx": "react"` and `"jsxFactory": "x4_react.create_element"` (esbuild reads

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "x4js",
-  "version": "2.3.29",
+  "version": "2.3.30",
+  "description": "A full TypeScript framework for web and desktop applications: components written as classes (layouts, inputs, lists, grids, dialogs, forms, charts...) and a command line to create, serve and build them.",
   "license": "MIT",
   "type": "module",
   "main": "src/x4.ts",

package/src/components/assets/icons.ts

@@ -19,6 +19,8 @@ const x4icons = {
 	danger: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
 	loading: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M207.4 20.4c2.4 8.5-2.6 17.3-11.2 19.7C101.5 66.2 32 153 32 256c0 123.7 100.3 224 224 224s224-100.3 224-224c0-103-69.5-189.8-164.3-215.9c-8.5-2.4-13.5-11.2-11.2-19.7s11.2-13.5 19.7-11.2C432.5 39.1 512 138.2 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 138.2 79.5 39.1 187.7 9.2c8.5-2.4 17.3 2.6 19.7 11.2z"/></svg>`,
 	close_box: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"/></svg>`,
+	// a triangle to the right: a menu item that opens a sub menu
+	caret: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>`,
 	// a triangle, a "!" cut in it
 	warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1L15.5 14.5H.5zM7.25 5.5h1.5V10h-1.5zM7 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0z"/></svg>`,
 };

package/src/components/dialog/dialog.module.scss

@@ -20,6 +20,7 @@
 	--color-dialog-caption: var( --accent-background-active );
 	--color-dialog-caption-text: var( --accent-color );
 	--color-dialog-background: var( --background-primary );
+	--color-dialog-border: transparent;		// its shadow is enough on a light background
 }
 
 .x4dialog {
@@ -28,6 +29,7 @@
 
 	position: absolute !important;
 	background-color: var( --color-dialog-background );
+	border: 1px solid var( --color-dialog-border );
 	max-width: 99vw;
 	outline: none;
 	

package/src/components/dialog/dialog.ts

@@ -55,6 +55,7 @@ interface DialogEvents extends PopupEvents {
  * --color-dialog-caption
  * --color-dialog-caption-text
  * --color-dialog-background
+ * --color-dialog-border
  * ```
  */
 

package/src/components/menu/menu.module.scss

@@ -92,12 +92,10 @@
 			font-weight: 600;
 		}
 
-		&.popup {
-			&:after {
-				//<todo: see that
-				content: url("./caret-right-solid.svg");
-				width: 6px;
-			}
+		// the triangle of a sub menu: after the text, which takes the width, at the right
+		#sub {
+			width: 6px;
+			height: 12px;
 		}
 
 		&:hover:not(.title),

package/src/components/menu/menu.ts

@@ -95,8 +95,10 @@ class CMenuItem extends Component {
 		}
 
 		this.setContent( [
-			new Icon({ id:"icon", iconId }), 
-			new Component( { id: "text", content: itm.text } )
+			new Icon({ id:"icon", iconId }),
+			new Component( { id: "text", content: itm.text } ),
+			// a sub menu: a triangle at the right, in the colour of the text
+			itm.menu ? new Icon( { id: "sub", iconId: icons.caret } ) : null,
 		]);
 
 		if( itm.menu ) {

package/src/components/popup/popup.ts

@@ -62,6 +62,32 @@ function dismissLast( e: UIEvent ) {
 	autoclose_list[autoclose_list.length-1].dismiss( );
 }
 
+/**
+ * a wheel outside every popup is ignored: the page under them does not scroll, it would leave
+ * them where they were. In a popup (a long menu), it scrolls as usual
+ */
+
+function ignoreWheel( e: WheelEvent ) {
+	if( !autoclose_list.some( x => x.contains( e.target as Node ) ) ) {
+		e.preventDefault( );
+	}
+}
+
+/**
+ * the listeners of the document while a popup that closes by itself is shown
+ */
+
+function watchOutside( on: boolean ) {
+	if( on ) {
+		document.addEventListener( "pointerdown", dismissLast, true );
+		document.addEventListener( "wheel", ignoreWheel, { capture: true, passive: false } );
+	}
+	else {
+		document.removeEventListener( "pointerdown", dismissLast, true );
+		document.removeEventListener( "wheel", ignoreWheel, true );
+	}
+}
+
 /**
  * @cssvar
  * ```
@@ -256,7 +282,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			if( idx>=0 ) {
 				autoclose_list.splice( idx, 1 );
 				if( autoclose_list.length==0 ) {
-					document.removeEventListener( "pointerdown", dismissLast, true );
+					watchOutside( false );
 				}
 			}
 		}
@@ -295,7 +321,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 				
 		if( this.props.autoClose ) {
 			if( autoclose_list.length==0 ) {
-				document.addEventListener( "pointerdown", dismissLast, true );
+				watchOutside( true );
 			}
 
 			autoclose_list.push( this );
@@ -384,7 +410,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		const list = inc_group.reverse( );
 		autoclose_list = excl_group;
 		if( autoclose_list.length==0 ) {
-			document.removeEventListener( "pointerdown", dismissLast, true );
+			watchOutside( false );
 		}
 		
 		list.forEach( x => x.close() );

package/src/components/shared.scss

@@ -62,8 +62,9 @@
 	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
+// its colour from the theme (--shadow-color): darker on a dark background
 %shadow-xl {
-	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+	box-shadow: 0 20px 25px -5px var( --shadow-color ), 0 8px 10px -6px var( --shadow-color );
 }
 
 %shadow-xxl {

package/src/components/themes.scss

@@ -19,8 +19,9 @@
 $color--base: #569cd6;
 $color--interval: 8.4%;
 
-// the blues of the dark theme, from their own base
-$color--dark-base: #5796ca;
+// the blues of the dark theme, from their own base, with the intervals of the light one: its accent
+// (a60, the base less one interval) #245883
+$color--dark-base: #2d6fa5;
 
 :root {
 	--color-primary-a0: #ffffff;
@@ -93,6 +94,9 @@ $color--dark-base: #5796ca;
 	--border-hover: color-mix(in srgb, var(--color-primary-a100) 23.9%, var(--color-primary-a0));		// #c2c2c2
 	--border-focus: var(--accent-background);
 
+	// the shadow of what floats over the page (%shadow-xl: a dialog, a list, a notification, a tooltip)
+	--shadow-color: rgb(0 0 0 / 0.1);
+
 	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
@@ -123,14 +127,14 @@ html.x4theme-dark {
 	--color-primary-a20: #37373d;		// list.inactiveSelectionBackground
 	--color-primary-a30: #3c3c3c;		// input.border
 
-	// the blues: from $color--dark-base (chosen); where VS Code has list.activeSelectionBackground,
-	// button.background and focusBorder, button.hoverBackground
-	--color-primary-a40: #{color.adjust($color--dark-base, $lightness: -35%)};		// a selection
-	--color-primary-a50: #{$color--dark-base};										// a button, the focus
-	--color-primary-a55: #{color.adjust($color--dark-base, $lightness: -5%)};		// a button hovered
-	--color-primary-a60: #{$color--dark-base};
-	--color-primary-a70: #{color.adjust($color--dark-base, $lightness: -5%)};
-	--color-primary-a80: #{color.adjust($color--dark-base, $lightness: -35%)};
+	// the blues: from $color--dark-base (chosen), as the light theme makes them; a40, a selection,
+	// where VS Code has list.activeSelectionBackground
+	--color-primary-a40: #{color.adjust($color--dark-base, $lightness: -19.4%)};						// a selection
+	--color-primary-a50: #{$color--dark-base};
+	--color-primary-a55: #{color.adjust($color--dark-base, $lightness: -5%)};							// the accent hovered
+	--color-primary-a60: #{color.adjust($color--dark-base, $lightness: -$color--interval)};				// the accent
+	--color-primary-a70: #{color.adjust($color--dark-base, $lightness: -$color--interval * 2)};			// focused
+	--color-primary-a80: #{color.adjust($color--dark-base, $lightness: -$color--interval * 3)};			// active
 
 	--color-primary-a90: #cccccc;
 	--color-primary-a100: #cccccc;		// foreground
@@ -162,6 +166,10 @@ html.x4theme-dark {
 	--color-dialog-caption: #181818;			// titleBar.activeBackground
 	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
 	--color-dialog-background: #202020;			// editorWidget.background
+	--color-dialog-border: #313131;				// widget.border: its edge on the dark background
+
+	// a shadow seen on a dark background: darker
+	--shadow-color: rgb(0 0 0 / 0.5);
 
 	// the tiles of a MapView are light: turned dark, their colours kept
 	--mapview-tile-filter: invert( 1 ) hue-rotate( 180deg ) brightness( 0.95 ) contrast( 0.9 );

package/src/components/tooltips/tooltips.scss

@@ -27,6 +27,8 @@
 	--tooltip-color: var( --color-primary-a90 );
 	--tooltip-border: var( --color-primary-a20 );
 	--tooltip-image-background: var( --background-primary );
+
+	--tooltip-max-width: 30vw;		// a long text goes on the next line; none: the width of the text
 }
 
 .x4tooltip {
@@ -41,6 +43,12 @@
 	border: 1px solid var( --tooltip-border ); 
 	background-color: var( --tooltip-background );
     width: max-content;
+	max-width: var( --tooltip-max-width );
+
+	// its content (a Box: it does not shrink) as wide as the tooltip at most: the text goes on the next line
+	> .x4hbox {
+		flex-shrink: 1;
+	}
 
 	.x4icon {
 		padding: 2px 4px;

package/src/components/tooltips/tooltips.ts

@@ -72,6 +72,14 @@ export function initTooltips( ) {
 
 	}, true );
 
+	// a click: no tooltip, it would stay over what the click opens
+	document.addEventListener( "mousedown", ( ) => {
+		if( last_hit ) {
+			last_hit = null;
+			closeTT( );
+		}
+	}, true );
+
 	document.addEventListener( "mousemove", ( ev: MouseEvent ) => {
 		if( last_hit ) {
 			mouse_pos = { x:ev.pageX, y:ev.pageY }
@@ -85,6 +93,11 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 	}
 
 	timer.setTimeout( "update", 300, ( ) => {
+		// its element gone in the meantime
+		if( !last_hit || isGone( last_hit ) ) {
+			return;
+		}
+
 		tooltip.setText( unsafeHtml(text) );
 
 		let y = mouse_pos.y;
@@ -94,12 +107,29 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 
 		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
 		tooltip.displayAt( mouse_pos.x+17, y+5 );
+
+		// an element removed or hidden under the mouse has no mouseleave: it is checked every second
+		timer.setInterval( "check", 1000, ( ) => {
+			if( !last_hit || isGone( last_hit ) ) {
+				last_hit = null;
+				closeTT( );
+			}
+		} );
 	} );
 }
 
 function closeTT( ) {
 	tooltip.show( false );
 	timer.clearTimeout( "update" );
+	timer.clearInterval( "check" );
+}
+
+/**
+ * the element of the tooltip, not shown any more: removed from the page, or hidden
+ */
+
+function isGone( el: HTMLElement ) {
+	return !el.isConnected || el.getClientRects( ).length==0;
 }
 
 /**
@@ -114,6 +144,7 @@ function closeTT( ) {
  * --tooltip-color
  * --tooltip-border
  * --tooltip-image-background
+ * --tooltip-max-width
  * ```
  */
 

package/src/components/menu/caret-right-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="var(--color-gray-8)"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>