x4js 2.3.26 → 2.3.28

package/src/components/treeview/treeview.module.scss

@@ -20,6 +20,7 @@
 	--treeview-background: var( --background-primary );
 
 	--treeitem-color: var( --text-primary );
+	--treeitem-icon-color: var( --icon-color );
 
 	--treeitem-backgound-hover: var( --background-secondary );
 	--treeitem-color-hover: var( --text-primary );
@@ -79,7 +80,7 @@
 									
 				&>.label {
 					--label-color: var( --treeitem-color );
-					--label-icon-color: var( --treeitem-color );
+					--label-icon-color: var( --treeitem-icon-color );
 
 					gap: 4px;
 
@@ -210,6 +211,10 @@
 		border-color: var( --border );
 		color: var( --treeview-item-color-disabled );
 
+		// the texts and the icons of the items
+		--treeitem-color: var( --treeview-item-color-disabled );
+		--treeitem-icon-color: var( --treeview-item-color-disabled );
+
 		&>.body {
 			.x4viewport {
 				pointer-events: none;

package/src/components/treeview/treeview.ts

@@ -16,7 +16,7 @@
 
 import { asap } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange } from '../../core/component';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { Label, SimpleText } from '../label/label';
@@ -73,6 +73,7 @@ export interface TreeviewEvents extends ComponentEvents {
  * ```
  * --treeview-background
  * --treeitem-color
+ * --treeitem-icon-color
  * --treeitem-backgound-hover
  * --treeitem-color-hover
  * --treeitem-background-sel
@@ -244,30 +245,24 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	}
 
 	private _on_click( ev: UIEvent ) {
-		let target = ev.target as HTMLElement;
-		
-		while( target && target!=this.dom ) {
-			const c = componentFromDOM( target );
-			
-			if( c && c.hasClass("item") ) {
-				const id = c.getInternalData( "id" );
-
-				const fev: ComponentEvent = { context:id };
-				if (ev.type == 'click') {
-					this.fire('click', fev );
-				}
-				else {
-					this.fire('dblClick', fev );
-				}
-
-				if (!fev.defaultPrevented) {
-					this._selectItem( id, c );
-				}
+		// an item of this tree, not of a component around it
+		const c = Component.closest( ev.target as Element, ".item" );
+		if( c && this.contains( c ) ) {
+			const id = c.getInternalData( "id" );
+
+			const fev: ComponentEvent = { context:id };
+			if (ev.type == 'click') {
+				this.fire('click', fev );
+			}
+			else {
+				this.fire('dblClick', fev );
+			}
 
-				return;
+			if (!fev.defaultPrevented) {
+				this._selectItem( id, c );
 			}
 
-			target = target.parentElement;
+			return;
 		}
 
 		this.clearSelection( );

package/src/components/video/video.module.scss

@@ -20,11 +20,14 @@
 	background-color: black;
 	position: relative;
 	
+	// the size of the box, whatever the size of the stream (a <video> keeps its own size
+	// with only left / right): the image fitted in it, black bands around
 	.vplayer {
 		position: absolute;
 		left: 0;
 		top: 0;
-		right: 0;
-		bottom: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
 	}
 }

package/src/components/video/video.ts

@@ -23,7 +23,8 @@ interface VideoProps extends ComponentProps {
 	autoplay?: boolean;
 	muted?: boolean;
 	playsInline?: boolean;
-	stream: MediaStream;
+	src?: string;			// a file to play (url); a stream, when there is one, is shown instead
+	stream?: MediaStream;	// a camera, a screen, a canvas (captureStream)
 }
 
 /**
@@ -55,6 +56,10 @@ export class Video extends Box {
 			this.playsInline = props.playsInline;
 		}
 
+		if( props.src ) {
+			this.src = props.src;
+		}
+
 		this.stream = props.stream;
 	}
 
@@ -86,6 +91,14 @@ export class Video extends Box {
 		this.player.playsInline = set;
 	}
 
+	get src( ) {
+		return this.player.src;
+	}
+
+	set src( url: string ) {
+		this.player.src = url;
+	}
+
 	set stream( stream: MediaStream ) {
 		this.player.srcObject = stream;
 	}

package/src/core/component.ts

@@ -959,7 +959,24 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      */
 
 	parentElement<T extends Component>( cls?: Constructor<T> ): T {
-		return Component.parentElement<T>( this.dom, cls );	
+		return Component.parentElement<T>( this.dom, cls );
+	}
+
+	/**
+	 * The nearest component whose element matches a css selector: this one, or one of its ancestors.
+	 * @returns null when there is none
+	 */
+
+	closest<T extends Component = Component>( selector: string ): T {
+		return Component.closest<T>( this.dom, selector );
+	}
+
+	/**
+	 * true when a node, or the element of a component, is the element of this one or inside it
+	 */
+
+	contains( other: Component | Node ): boolean {
+		return this.dom.contains( other instanceof Component ? other.dom : other );
 	}
 
 	/**
@@ -992,10 +1009,22 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 			dom = dom.parentElement;
 		}
-		
+
 		return null;
 	}
 
+	/**
+	 * The nearest component whose element matches a css selector: the one of dom, or one of its ancestors.
+	 * @returns null when there is none
+	 * @example
+	 * // in a click handler: the item hit, wherever the click is in it
+	 * const item = Component.closest( ev.target as Element, ".x4timeline > .item" );
+	 */
+
+	static closest<T extends Component = Component>( dom: Element, selector: string ): T {
+		return componentFromDOM<T>( dom.closest( selector ) );
+	}
+
 	/**
      * Returns the first child element as a Component instance.
      * @returns The first child component, or `null` if none exists.

package/src/core/core_pdf.ts

@@ -1543,6 +1543,23 @@ export class X4PDFBuilder {
 
 		return result
 	}
+
+	/**
+	 * the document as a file, of type application/pdf (build, its streams not compressed)
+	 */
+
+	buildBlob(): Blob {
+		return new Blob([this.build() as BlobPart], { type: 'application/pdf' })
+	}
+
+	/**
+	 * an object url of the document: the src of an iframe, the href of a link, window.open.
+	 * URL.revokeObjectURL( url ) frees it when it is no longer shown
+	 */
+
+	buildURL(): string {
+		return URL.createObjectURL(this.buildBlob())
+	}
 }
 
 /*

package/src/core/core_react.ts

@@ -13,25 +13,19 @@
  * 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.
  *
- * to use you must:
- * 
- * 1. add this to your tsconfig.json
+ * JSX in .tsx files:
+ *
+ * 1. in tsconfig.json (esbuild reads it too):
  * 		"compilerOptions": {
- * 			...
- * 			"jsx": "preserve",
- * 			...
- * 		}
- * 	
- * 2. be sure that esbuild has this:
- * 		jsxFactory: "x4create_element",
- * 		loader: { ".ts": "tsx" }
- * 		
- * 
- * after that, all things like that will be ok
- * 
- * 	import { x4_create_element }  from "x4react"
- * 	const xx = <h1>This is a title</h1>
- * 
+ * 			"jsx": "react",
+ * 			"jsxFactory": "x4_react.create_element"
+ * 		},
+ * 		"files": [ "node_modules/x4js/src/x4tsx.d.ts" ]	// the JSX types of x4 (ref)
+ *
+ * 2. in each .tsx file, the factory imported:
+ * 		import { Label, VBox, x4_react } from "x4js";
+ * 		const box = <VBox><Label text="Hello" /></VBox>;
+ *
  */
 
 import { Component } from './component';

package/src/core/core_shortcuts.ts

@@ -51,7 +51,8 @@ interface Keys {
 	key: string;
 }
 
-const isMac = /mac|iphone|ipad/i.test( navigator.platform ?? "" );
+/** true on a Mac, an iPhone or an iPad: Mod is Cmd there */
+export const isMac = /mac|iphone|ipad/i.test( navigator.platform ?? "" );
 
 /**
  * "Shift+Mod+K" -> shift, ctrl (cmd on a Mac), k

package/src/core/core_svg.ts

@@ -557,7 +557,8 @@ export class SvgText extends SvgItem {
 	 * @returns The current `SvgText` instance for chaining.
 	 */
 	fontWeight( weight: 'light' | 'normal' | 'bold' ): this {
-		return this.setAttr( 'font-weight', weight );
+		// "light" is no value of font-weight: its number
+		return this.setAttr( 'font-weight', weight=='light' ? '300' : weight );
 	}
 
 	/**
@@ -583,23 +584,25 @@ export class SvgText extends SvgItem {
 	}
 
 	/**
-	 * change the vertical alignment
+	 * change the vertical alignment: y is the top, the middle, the bottom or the baseline
+	 * of the text. dominant-baseline, read by all the browsers (alignment-baseline is not
+	 * by Firefox before 149)
 	 */
 	verticalAlign( align: 'top' | 'center' | 'bottom' | 'baseline' ): this {
 
 		let al;
 		switch( align ) {
 			case 'top': al = 'hanging'; break;
-			case 'center': al = 'middle'; break;
-			case 'bottom': al = 'baseline'; break;
-			case 'baseline': al = 'mathematical'; break;
+			case 'center': al = 'central'; break;
+			case 'bottom': al = 'ideographic'; break;
+			case 'baseline': al = 'alphabetic'; break;
 			default:
 				// If an invalid alignment is provided, do nothing and return this for chaining.
 				console.warn(`Invalid verticalAlign value: ${align}. Must be 'top', 'center', 'bottom', or 'baseline'.`);
 				return this;
 		}
 
-		return this.setAttr( 'alignment-baseline', al );
+		return this.setAttr( 'dominant-baseline', al );
 	}
 }