x4js 2.0.13 → 2.0.15

package/lib/src/components/canvas/canvas_ex.ts

@@ -0,0 +1,276 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file canvas_ex.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2025 R-libre ingenierie
+ *
+ * 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.
+ **/
+
+import { Point } from "../../core/core_tools"
+
+export interface CanvasEx extends CanvasRenderingContext2D {
+	width: number;
+	height: number;
+
+	smoothLine(points: any[], path: CanvasPath, move: boolean): void;
+	smoothLineEx(_points: any[], tension: number, numOfSeg: number, path: CanvasPath, move?: boolean, close?: boolean): void;
+	line(x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number): void;
+	roundRect(x: number, y: number, width: number, height: number, radius: number): void;
+	calcTextSize(text: string, rounded: boolean): { width: number, height: number };
+	setFontSize(fs: number): void;
+	circle(x: number, y: number, radius: number): void;
+}
+
+export function createPainter(c2d: CanvasRenderingContext2D, w: number, h: number): CanvasEx {
+
+	let cp = c2d as CanvasEx;
+
+	cp.width = w;
+	cp.height = h;
+
+	cp.smoothLine = smoothLine;
+	cp.smoothLineEx = smoothLineEx;
+	cp.line = line;
+	cp.roundRect = roundRect;
+	cp.calcTextSize = calcTextSize;
+	cp.setFontSize = setFontSize;
+	cp.circle = circle;
+
+	return cp;
+}
+
+/**
+ * 
+ */
+
+function smoothLine( this: CanvasRenderingContext2D, points: any[], path: CanvasPath = null, move = true) {
+	if (points.length < 2) {
+		return;
+	}
+
+	if (!path) {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		path = this;
+	}
+
+	if (points.length == 2) {
+		if (move !== false) {
+			path.moveTo(points[0].x, points[0].y);
+		}
+		else {
+			path.lineTo(points[0].x, points[0].y);
+		}
+
+		path.lineTo(points[1].x, points[1].y);
+		return;
+	}
+
+	function midPointBtw(p1: Point, p2: Point ) {
+		return {
+			x: p1.x + (p2.x - p1.x) / 2,
+			y: p1.y + (p2.y - p1.y) / 2
+		};
+	}
+
+	function getQuadraticXY(t: number, sx: number, sy: number, cp1x: number, cp1y: number, ex: number, ey: number) : Point {
+		return {
+			x: (1 - t) * (1 - t) * sx + 2 * (1 - t) * t * cp1x + t * t * ex,
+			y: (1 - t) * (1 - t) * sy + 2 * (1 - t) * t * cp1y + t * t * ey
+		};
+	}
+
+	let p1 = points[0],
+		p2 = points[1],
+		p3 = p1;
+
+	path.moveTo(p1.x, p1.y);
+
+	for (let i = 1, len = points.length; i < len; i++) {
+		// we pick the point between pi+1 & pi+2 as the
+		// end point and p1 as our control point
+		let midPoint = midPointBtw(p1, p2);
+		//this.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
+		for (let i = 0; i < 8; i++) {
+			let { x, y } = getQuadraticXY(i / 8, p3.x, p3.y, p1.x, p1.y, midPoint.x, midPoint.y);
+			path.lineTo(x, y);
+		}
+
+		p1 = points[i];
+		p2 = points[i + 1];
+		p3 = midPoint;
+	}
+
+	// Draw last line as a straight line while
+	// we wait for the next point to be able to calculate
+	// the bezier control point
+
+	path.lineTo(p1.x, p1.y);
+}
+
+function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: number = 0.5, numOfSeg: number = 10, path: CanvasPath = null, move = true, close = false) {
+
+	let points = [];
+
+	//pts = points.slice(0);
+	for (let p = 0, pc = _points.length; p < pc; p++) {
+		points.push(_points[p].x);
+		points.push(_points[p].y);
+	}
+
+	let pts,
+		i = 1,
+		l = points.length,
+		rPos = 0,
+		rLen = (l - 2) * numOfSeg + 2 + (close ? 2 * numOfSeg : 0),
+		res = new Float32Array(rLen),
+		cache = new Float32Array((numOfSeg + 2) * 4),
+		cachePtr = 4;
+
+	pts = points.slice(0);
+
+	if (close) {
+		pts.unshift(points[l - 1]);				// insert end point as first point
+		pts.unshift(points[l - 2]);
+		pts.push(points[0], points[1]); 		// first point as last point
+	}
+	else {
+		pts.unshift(points[1]);					// copy 1. point and insert at beginning
+		pts.unshift(points[0]);
+		pts.push(points[l - 2], points[l - 1]);	// duplicate end-points
+	}
+
+	// cache inner-loop calculations as they are based on t alone
+	cache[0] = 1;								// 1,0,0,0
+
+	for (; i < numOfSeg; i++) {
+
+		const st = i / numOfSeg,
+			st2 = st * st,
+			st3 = st2 * st,
+			st23 = st3 * 2,
+			st32 = st2 * 3;
+
+		cache[cachePtr++] = st23 - st32 + 1;	// c1
+		cache[cachePtr++] = st32 - st23;		// c2
+		cache[cachePtr++] = st3 - 2 * st2 + st;	// c3
+		cache[cachePtr++] = st3 - st2;			// c4
+	}
+
+	cache[cachePtr] = 1;						// 0,1,0,0
+
+	// calc. points
+	parse(pts, cache, l);
+
+	if (close) {
+		//l = points.length;
+		pts = [];
+		pts.push(points[l - 4], points[l - 3], points[l - 2], points[l - 1]); // second last and last
+		pts.push(points[0], points[1], points[2], points[3]); // first and second
+		parse(pts, cache, 4);
+	}
+
+	function parse(pts: number[], cache: Float32Array, l: number) {
+
+		for (let i = 2, t; i < l; i += 2) {
+
+			let pt1 = pts[i],
+				pt2 = pts[i + 1],
+				pt3 = pts[i + 2],
+				pt4 = pts[i + 3],
+
+				t1x = (pt3 - pts[i - 2]) * tension,
+				t1y = (pt4 - pts[i - 1]) * tension,
+				t2x = (pts[i + 4] - pt1) * tension,
+				t2y = (pts[i + 5] - pt2) * tension;
+
+			for (t = 0; t < numOfSeg; t++) {
+
+				let c = t << 2, //t * 4;
+
+					c1 = cache[c],
+					c2 = cache[c + 1],
+					c3 = cache[c + 2],
+					c4 = cache[c + 3];
+
+				res[rPos++] = c1 * pt1 + c2 * pt3 + c3 * t1x + c4 * t2x;
+				res[rPos++] = c1 * pt2 + c2 * pt4 + c3 * t1y + c4 * t2y;
+			}
+		}
+	}
+
+	// add last point
+	l = close ? 0 : points.length - 2;
+	res[rPos++] = points[l];
+	res[rPos] = points[l + 1];
+
+	if (!path) {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		path = this;
+	}
+
+	// add lines to path
+	for (let i = 0, l = res.length; i < l; i += 2) {
+		if (i == 0 && move !== false) {
+			path.moveTo(res[i], res[i + 1]);
+		}
+		else {
+			path.lineTo(res[i], res[i + 1]);
+		}
+	}
+}
+
+function line(this: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number = 1) {
+	this.save();
+	this.beginPath();
+	this.moveTo(x1, y1);
+	this.lineTo(x2, y2);
+	this.lineWidth = lineWidth;
+	this.strokeStyle = color;
+	this.stroke();
+	this.restore();
+}
+
+function roundRect(this: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
+	//this.beginPath( );
+	this.moveTo(x + radius, y);
+	this.lineTo(x + width - radius, y);
+	this.quadraticCurveTo(x + width, y, x + width, y + radius);
+	this.lineTo(x + width, y + height - radius);
+	this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+	this.lineTo(x + radius, y + height);
+	this.quadraticCurveTo(x, y + height, x, y + height - radius);
+	this.lineTo(x, y + radius);
+	this.quadraticCurveTo(x, y, x + radius, y);
+	this.closePath();
+}
+
+function calcTextSize( this: CanvasRenderingContext2D, text: string, rounded = false): { width: number, height: number } {
+
+	let fh = this.measureText(text);
+	let lh = fh.fontBoundingBoxAscent + fh.fontBoundingBoxDescent;
+
+	if (rounded) {
+		return { width: Math.round(fh.width), height: Math.round(lh) };
+	}
+	else {
+		return { width: fh.width, height: lh };
+	}
+}
+
+function setFontSize( this: CanvasRenderingContext2D, fs: number) {
+	let fsize = Math.round(fs) + 'px';
+	this.font = this.font.replace(/\d+px/, fsize);
+}
+
+function circle( this: CanvasRenderingContext2D, x: number, y: number, radius: number) {
+	this.moveTo(x + radius, y);
+	this.arc(x, y, radius, 0, Math.PI * 2);
+}

package/lib/src/components/checkbox/checkbox.ts

@@ -26,6 +26,7 @@ interface CheckboxProps extends ComponentProps {
 	label: string; 			// The text label for the checkbox.
 	checked?: boolean;		// Optional boolean indicating if the checkbox is checked by default.
 	value?: boolean | number | string;			// Optional value associated with the checkbox.
+	name?: string;
 	change?: EventCallback<EvChange>;
 }
 
@@ -59,6 +60,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 					this._input = new Input( { 
 						type:"checkbox", 
 						id: inputId, 
+						name: props.name,
 						checked: props.checked,
 						dom_events: {
 							change: ( ) => this._on_change( ),
@@ -77,6 +79,20 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 		svgLoader.load( icon ).then( svg => {
 			this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", svg );
 		});
+
+		this.addDOMEvent('click', (e) => this._on_click(e));	// for outside click
+	}
+
+	/**
+	 * handle click outside label & input
+	 */
+	
+	protected _on_click( ev: MouseEvent ) {
+		if( ev.target==this.dom ) {
+			(this._input.dom as HTMLInputElement).click( );
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
 	}
 
 	/**
@@ -92,8 +108,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 	 */
 
 	public getCheck() {
-		const d = this._input.dom as HTMLInputElement;
-		return d.checked;
+		return this._input.getCheck();
 	}
 
 	/**
@@ -102,8 +117,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 	 */
 
 	public setCheck(ck: boolean) {
-		const d = this._input.dom as HTMLInputElement;
-		d.checked = ck;
+		this._input.setCheck( ck );
 	}
 
 	/**

package/lib/src/components/combobox/combobox.module.scss

@@ -28,7 +28,7 @@
 	--combobox-btn-color-hover: var( --text-primary );
 }
 
-.x4dropdown {
+.x4dropdownlist {
 	@extend .shadow-xl;
 	@extend .hbox;
 
@@ -44,35 +44,42 @@
 		margin: 0;
 		width: 100%;
 		height: 200px;
+
+		.x4item {
+			white-space: nowrap;
+		}
 	}
 }
 
 .x4combobox {
 	@extend .hbox;
 	margin: 5px;
+	gap: 6px;
 
-	//&> #label {
-	//	padding: 0 6px;
-	//	border-bottom: 1px solid transparent;
-
+	&> #label {
+		
 		&> .x4label {
-			padding: 0 6px;
+			padding: 0 6px 0 0;
 			border-bottom: 1px solid transparent;
 
 			height: 100%;
-			padding: 0;
 			font-weight: 500;
-			gap: 0;
+			gap: 0px;
 					
-			#text::not(.empty)::after {
-				content: ":"
+			#text:not(.empty) {
+				&::after {
+					content: ":"
+				}
 			}
 		}
-	//}
+	}
 
 	&>#edit {
 		@extend .flex;
 		border-bottom: 1px solid var( --combobox-border );
+		&:focus-within {
+			border-bottom-color: var( --combobox-border-focus );
+		}
 		
 		.x4input {
 			@extend .flex;
@@ -97,10 +104,10 @@
 				color: var( --combobox-btn-color-hover );
 			}
 
-			&:focus {
+			//&:focus {
 				//background-color: var( --color-30 );
 				//color: var( --color-10 );
-			}
+			//}
 		}
 	}
 
@@ -116,9 +123,11 @@
 	}
 	
 	&[required] {
-		.x4label::before {
+		& > #label > .x4label::before {
 			content: "*";
-			color: var( --color-90 )
+			font-weight: bold;
+			color: var( --textedit-required );
+			margin-right: 2px;
 		}
 	}
 }

package/lib/src/components/combobox/combobox.ts

@@ -14,8 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvent, ComponentProps, EvChange, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
-import { Listbox, ListboxID, ListItem, kbNav } from '../listbox/listbox';
+import { Component, ComponentEvents, ComponentProps, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
+import { class_ns, IComponentInterface, IFormElement, kbNav } from '@core/core_tools';
+import { EventCallback } from '@core/core_events';
+
+import { Listbox, ListboxID, ListItem } from '../listbox/listbox';
 import { Popup, PopupEvents, PopupProps } from '../popup/popup.js';
 import { Label } from '../label/label';
 import { Input } from '../input/input';
@@ -24,7 +27,6 @@ import { HBox } from '../boxes/boxes';
 
 import "./combobox.module.scss";
 import icon from "./updown.svg";
-import { class_ns } from '@core/core_tools.js';
 
 
 
@@ -37,8 +39,9 @@ interface DropdownProps extends Omit<PopupProps,"content"> {
 	items: ListItem[];
 }
 
+
 @class_ns( "x4" )
-class Dropdown extends Popup<DropdownProps,DropdownEvents> {
+export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 
 	private _list: Listbox;
 
@@ -70,18 +73,26 @@ class Dropdown extends Popup<DropdownProps,DropdownEvents> {
  * 
  */
 
+interface ComboboxEvents extends ComponentEvents {
+	selectionChange: EvSelectionChange;
+}
+
 interface ComboboxProps extends Omit<ComponentProps,"content"> {
 	label?: string;
+	name?: string;
+	value?: string;
 	labelWidth?: number | string;
 	readonly?: boolean;
+	required?: boolean;
 	items: ListItem[];
+	selectionChange?: EventCallback<EvSelectionChange>,
 }
 
 @class_ns( "x4" )
-export class Combobox extends Component<ComboboxProps> {
+export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 
-	private _dropdown: Dropdown;
-	private _label: Label;
+	private _popup: DropdownList;
+	//private _label: Label;
 	private _input: Input;
 	private _button: Button;
 	private _prevent_close = false;
@@ -92,25 +103,53 @@ export class Combobox extends Component<ComboboxProps> {
 
 		const id = makeUniqueComponentId( );
 
+		this.mapPropEvents( props, "selectionChange" );
+
+		const readonly = props.readonly===false ? false : true;	// by default
+
 		this.setContent( [
 			new HBox( { id: "label", content: new Label( { tag: "label", text: props.label, labelFor: id, width: props.labelWidth } ) } ),
 			this._edit  = new HBox( { id: "edit", content: [
-				this._input  = new Input( { type: "text", value: "", readonly: props.readonly }),
-				this._button = new Button( { icon: icon } )
+				this._input  = new Input( { id, type: "text", value: "", readonly: readonly, required: props.required }),
+				this._button = new Button( { icon: icon, tabindex: -1 } )
 			]} ),
 		])
 
-		this._dropdown = new Dropdown( { items: props.items } );
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
+		if( props.required ) {
+			this.setAttribute( "required", true );
+		}
+
+		this._popup = new DropdownList( { items: props.items } );
+		const list = this._popup.getList( );
+
+		const _select = ( sel: ListboxID ) => {
+			const itm = list.getItem(sel);
 
-		this._dropdown.on( "selectionChange", ( ev ) => {
-			const sel = ev.selection as ListItem;
-			this._input.setValue( sel ? sel.text : "" );
+			//TODO: unsafehtml
+			//@ts-ignore
+			this._input.setValue( itm ? itm.text : "" );
 			
 			if( !this._prevent_close ) {
-				this._dropdown.show( false );
+				this._popup.show( false );
+			}
+		}
+
+		this._popup.on( "selectionChange", ( ev ) => {
+			const [sel] = ev.selection as ListboxID[];
+			if( sel!==undefined ) {	// no empty sel
+				_select( sel );			
+				this.fire( "selectionChange", ev );
 			}
 		});
 
+		if( props.value ) {
+			_select( props.value );
+		}
+
 		this._button.addDOMEvent( "click", ( ) => this._on_click( ) );
 		this._input.addDOMEvent( "input", ( ) => this._on_input( ) );
 		this._input.addDOMEvent( "keydown", ( ev ) => this._on_key( ev ) );
@@ -125,17 +164,17 @@ export class Combobox extends Component<ComboboxProps> {
 		switch( ev.key ) {
 			case "Enter":
 			case "Escape": {
-				this._dropdown.show( false );
+				this._popup.show( false );
 				break;
 			}
 
 			case "ArrowUp":
 				this._prevent_close = true;
-				if( !this._dropdown.isOpen( ) ) {
+				if( !this._popup.isOpen( ) ) {
 					this.showDropDown( );
 				}
 				else {
-					this._dropdown.getList().navigate( kbNav.prev );
+					this._popup.getList().navigate( kbNav.prev );
 				}
 
 				this._prevent_close = false;
@@ -143,11 +182,11 @@ export class Combobox extends Component<ComboboxProps> {
 
 			case "ArrowDown":
 				this._prevent_close = true;
-				if( !this._dropdown.isOpen( ) ) {
+				if( !this._popup.isOpen( ) ) {
 					this.showDropDown( );
 				}
 				else {
-					this._dropdown.getList().navigate( kbNav.next );
+					this._popup.getList().navigate( kbNav.next );
 				}
 
 				this._prevent_close = false;
@@ -163,15 +202,15 @@ export class Combobox extends Component<ComboboxProps> {
 	}
 
 	private _on_input( ) {
-		if( !this._dropdown.isOpen( ) ) {
+		if( !this._popup.isOpen( ) ) {
 			this.showDropDown( );
 		}
 
-		this._dropdown.getList().filter( this._input.getValue( ) );
+		this._popup.getList().filter( this._input.getValue( ) );
 	}
 
 	private _on_focusout( ) {
-		this._dropdown.show( false );
+		this._popup.show( false );
 	}
 	
 	private _on_click( ) {
@@ -184,8 +223,52 @@ export class Combobox extends Component<ComboboxProps> {
 		}
 		
 		const rc = this._edit.getBoundingRect( );
-		this._dropdown.setStyleValue( "width", rc.width+"px" );
-		this._dropdown.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+		this._popup.setStyleValue( "minWidth", rc.width+"px" );
+		this._popup.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+	}
+
+	setItems( items: ListItem[] ) {
+		this._getList().setItems( items );		
+	}
+
+	getValue( ) {
+		return this._input.getValue( );
+	}
+
+	setValue( value: string ) {
+		this._input.setValue( value );
+	}
+
+	selectItem( index: ListboxID ) {
+		this._getList( ).select( index );
+	}
+
+	getSelection( ) {
+		const [sel] = this._getList( ).getSelection( );
+		return sel;
+	}
+
+	private _getList( ) {
+		return this._popup.getList( );
+	}
+
+	/**
+	 * 
+	 */
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getSelection(); },
+				setRawValue: ( v: any ) => { this.selectItem(v); },
+				isValid: ( ) => { return this._input.isValid(); }
+			};
+
+			//@ts-ignore
+			return i as T;
+		}
+		
+		return super.queryInterface( name );
 	}
 }
 

package/lib/src/components/components.ts

@@ -8,11 +8,14 @@ export * from "./colorinput/colorinput"
 export * from "./colorpicker/colorpicker"
 export * from "./combobox/combobox"
 export * from "./dialog/dialog"
+export * from "./filedrop/filedrop"
 export * from "./form/form"
+export * from "./gridview/gridview"
 export * from "./header/header"
 export * from "./icon/icon"
 export * from "./image/image"
 export * from "./input/input"
+export * from "./keyboard/keyboard"
 export * from "./label/label"
 export * from "./link/link"
 export * from "./listbox/listbox"
@@ -22,7 +25,11 @@ export * from "./notification/notification"
 export * from "./panel/panel"
 export * from "./popup/popup"
 export * from "./progress/progress"
+export * from "./propgrid/propgrid"
+export * from "./radio/radio"
 export * from "./rating/rating"
+export * from "./tickline/tickline"
+export * from "./select/select"
 export * from "./sizers/sizer"
 export * from "./slider/slider"
 export * from "./switch/switch"