x4js 2.0.13 → 2.0.15

package/lib/src/components/btngroup/btngroup.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, Flex } from '../../core/component';
+import { Component, ComponentEvents, ComponentProps, Flex, Space } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { class_ns, isString } from '../../core/core_tools';
 import { _tr } from '../../core/core_i18n'
@@ -25,6 +25,7 @@ import { Label } from '../label/label.js';
 import { EvBtnClick } from '../dialog/dialog.js';
 
 import "./btngroup.module.scss"
+import { Input } from '../components.js';
 
 /**
  * accept "ok" or "ok.<classname>"
@@ -36,9 +37,10 @@ type predefined = 		`ok${ "" | `.${string}`}`
 					|	`no${ "" | `.${string}`}`
 					| 	`retry${ "" | `.${string}`}`
 					| 	`abort${ "" | `.${string}`}`
-					| 	"-";	// - = flex
+					| 	"-" | ">>"	// - = Flex
+					|   "~";		// space
 
-export type BtnGroupItem = predefined | Button | Label;
+export type BtnGroupItem = predefined | Button | Label | Input;
 
 interface BtnGroupEvents extends ComponentEvents {
 	btnclick: EvBtnClick;
@@ -86,18 +88,31 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 
 		const childs: Component[] = [];
 
+		const hasOption = ( options: string[], value: string ) => {
+			const idx = options.indexOf( value );
+			if( idx>=0 ) {
+				options.splice( idx, 1 );
+				return true;
+			}
+		}
+
+
 		btns?.forEach( (b: string | Component) => {
 
-			if( b==="-" ) {
+			if( b==="-" || b===">>" ) {
 				b = new Flex( );
 			}
+			else if( b=='~' ) {
+				b = new Space( "1em" );
+			}
 			else if( isString(b) ) {
 				let title: string;
 
 				const nm = (b as predefined);
 
-				let [txt,cls] = nm.split( "." );
-								
+				let [txt,...def] = nm.split( "." );
+
+				let cls = "";
 				switch( txt as predefined ) {
 					case "ok": 		title = _tr.global.ok; break;
 					case "cancel": 	title = _tr.global.cancel; break;
@@ -107,9 +122,23 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 					case "retry":	title = _tr.global.retry; break;
 				}
 
-				b = new Button( { cls, label: title, click: ( ) => {
-					this.fire( "btnclick", {button:nm as string} )
+				b = new Button( { cls, id: txt, label: title, click: ( ) => {
+					this.fire( "btnclick", {button:txt as string} )
 				} } );
+
+				if( hasOption( def, "default" ) ) {
+					b.addClass( 'default' );
+				}
+
+				if( hasOption( def, "autofocus" ) ) {
+					b.setAttribute( 'autofocus', true );
+				}
+				
+				if( hasOption( def, "disabled" ) ) {
+					b.enable( false );
+				}
+
+				b.addClass( def.join(" ") );
 			}
 
 			childs.push( b );
@@ -117,4 +146,8 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 
 		super.setContent( childs );
 	}
+
+	getButton( id: string ) {
+		return this.query<Button>( '#'+id );
+	}
 }

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

@@ -36,8 +36,12 @@
 
 	// outline
 	--ol-button-background: var( --background-primary );
-	--ol-button-background-active: #eee;
+	--ol-button-background-active: #ccc;
 	--ol-button-color-active: var( --text-primary );
+	--ol-button-background-hover: #eee;
+	--ol-button-color-hover: var( --text-primary );
+	--ol-button-color-disabled: #ccc;
+
 	--ol-button-color: var( --text-primary );
 	--ol-button-border: var( --border );
 	--ol-button-icon-color: var( --text-primary );
@@ -69,7 +73,9 @@
 	gap: 0.4em;
 		
 	&> #icon {
-		transition: color 0.3s;
+		transition: color 0.3s, fill 0.3s;
+		fill: var( --button-color );
+
 		width: 1em;
 		height: 1em;
 		//color: var( --button-icon-color );
@@ -80,12 +86,12 @@
 	}
 
 	&> #label {
-		@extend .flex;
+		flex-grow: 1;
 
 		padding: 0;
 		color: inherit;
 
-		&:empty {
+		&.empty {
 			display: none;
 		}
 	}
@@ -126,26 +132,38 @@
 
 	#icon {
 		color: var( --ol-button-icon-color );
+		fill: var(--ol-button-icon-color);
 	}
 
 	&:focus{
 		border-color: var( --ol-button-border-focus );
 		color: var( --ol-button-color-focus );
+		fill: var( --ol-button-color-focus );
 		#icon {
 			color: var( --ol-button-color-focus );
+			fill: var( --ol-button-color-focus );
 		}
 	}
 
+	&:hover{
+		background-color: var( --ol-button-background-hover );
+		color: var( --ol-button-color-hover );
+		fill: var( --ol-button-color-hover );
+	}	
+
 	&:active{
 		background-color: var( --ol-button-background-active );
 		color: var( --ol-button-color-active );
+		fill: var( --ol-button-color-active );
+
 		#icon {
 			color: var( --button-icon-color );
+			fill: var( --button-icon-color );
 		}
 	}	
 }
 
-.x4button.danger {
+.x4button.danger:not([disabled]) {
 	background-color: var( --alert-background );
 	color: var( --alert-color );
 

package/lib/src/components/button/button.ts

@@ -38,6 +38,8 @@ interface ButtonEvents extends ComponentEvents {
 export interface ButtonProps extends ComponentProps {
 	label?: string;
 	icon?: string;
+	tabindex?: boolean | number;
+	autorepeat?: number | boolean;
 	click?: EventCallback<EvClick>;
 }
 
@@ -47,6 +49,9 @@ export interface ButtonProps extends ComponentProps {
 
 @class_ns( "x4" )
 export class Button extends Component<ButtonProps,ButtonEvents> {
+
+	#text: Component;
+
 	/**
      * Creates an instance of Button.
      * 
@@ -59,12 +64,27 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 		super( { ...props, tag: 'button', content: null } );
 
 		this.mapPropEvents( props, 'click' );
-		this.addDOMEvent('click', (e) => this._on_click(e));
+
+		if( props.autorepeat ) {
+			this.addDOMEvent('pointerdown', (e) => this._on_mouse(e) );
+			this.addDOMEvent('pointerup', (e) => this._on_mouse(e) );
+		}
+		else {
+			this.addDOMEvent('click', (e) => this._on_click(e));
+		}
+
+		this.addDOMEvent('keydown', (e) => this._on_keydown(e) );
 
 		this.setContent( [
 			new Icon( { id: "icon", iconId: this.props.icon } ),
-			new Component( { id: "label", content: this.props.label } ),
+			this.#text = new Component( { id: "label" } ),
 		] );
+
+		this.setText( props.label );
+
+		if( props.tabindex!==false ) {
+			this.setAttribute( 'tabindex', props.tabindex );
+		}
 	}
 
 	/**
@@ -89,6 +109,52 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 		ev.stopPropagation();
 	}
 
+	protected _on_mouse( e: PointerEvent ) {
+
+		let count = 0;
+
+		if( e.type=='pointerdown' ) {
+			this.dom.setPointerCapture( e.pointerId );
+
+			const rt = this.props.autorepeat===true ? 200 : this.props.autorepeat as number;
+
+			this.setTimeout( 'repeat', 500, ( ) => {
+				count++;
+
+				this.fire('click', {} );
+				this.setInterval( 'repeat', rt, ( ) => {
+					this.fire('click', {} );
+				})
+			} );
+		}
+		else {
+			this.clearTimeout( 'repeat' );
+
+			if( !count ) {
+				this.fire('click', {} );
+			}
+		}
+	}
+
+	/**
+	 * simulate a click
+	 */
+
+	click( ) {
+		(this.dom as HTMLButtonElement).click( );
+	}
+
+	/**
+	 * called on key down
+	 */
+
+	protected _on_keydown( e: KeyboardEvent ) {
+		if( e.key=='Enter' ) {
+			this.click( );
+			e.preventDefault( );
+		}
+	}
+
 	/**
      * Sets the text content of the button's label.
      * 
@@ -99,9 +165,10 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
      */
 
 	public setText( text: string | UnsafeHtml ) {
-		this.query( "#label" ).setContent( text );
+		this.#text.setContent( text );
+		this.#text.setClass( "empty", !text );
 	}
-
+	
 	/**
      * Sets the icon of the button.
      * 
@@ -113,5 +180,6 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 	public setIcon( icon: string ) {
 		this.query<Icon>( "#icon" ).setIcon( icon );
 	}
+
 }
 

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

@@ -0,0 +1,25 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file canvas.module.scss
+ * @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.
+ **/
+
+ .x4canvas {
+	overflow: hidden;
+
+	&> canvas {
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+ }

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

@@ -0,0 +1,189 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file canvas.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 { class_ns } from '@core/core_tools.js';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
+import { EventCallback } from "../../core/core_events"
+import { CanvasEx, createPainter } from './canvas_ex.js';
+
+import './canvas.module.scss'
+
+export interface EvPaint extends ComponentEvent {
+	ctx: CanvasEx;
+}
+
+interface CanvasEventMap extends ComponentEvents {
+	paint: EvPaint;
+}
+
+interface CanvasProps extends ComponentProps {
+	paint: EventCallback<EvPaint>
+	clear?: boolean;
+}
+
+
+
+// ============================================================================
+// [CANVAS]
+// ============================================================================
+
+/**
+ * Standard Canvas
+ */
+
+@class_ns( "x4" )
+export class Canvas extends Component<CanvasProps, CanvasEventMap> {
+
+	private m_iwidth: number = -1;
+	private m_iheight: number = -1;
+	private m_scale = 1.0;
+	private m_canvas: Component;
+
+	constructor(props: CanvasProps) {
+		super(props);
+
+		this.mapPropEvents( props, 'paint' );
+		this.addDOMEvent('resized', () => { this._paint(); })
+		
+		this.m_iwidth = -1;
+		this.m_iheight = -1;
+		this.m_canvas = new Component({
+			tag: 'canvas'
+		});
+
+		this.setContent( this.m_canvas );
+	}
+
+	/**
+	 * scale the whole canvas
+	 */
+
+	scale(scale: number) {
+		this.m_scale = scale;
+		this.m_iwidth = -1;	// force recalc
+		this.redraw();
+	}
+
+	/**
+	 * return the internal canvas
+	 */
+	get canvas(): Component {
+		return this.m_canvas;
+	}
+
+	getContext( ) {
+		return (this.m_canvas.dom as HTMLCanvasElement).getContext('2d') as CanvasEx;
+	}
+
+	/**
+	 * redraw the canvas (force a paint)
+	 */
+
+	private $update_rep = 0;
+	public redraw(wait?: number) {
+
+		if (wait !== undefined) {
+			if( ++this.$update_rep>=20 ) {
+				this.clearTimeout( 'update' );
+				this._paint( );
+			}
+			else {
+				this.setTimeout( 'update', wait, () => this._paint() );
+			}
+		}
+		else {
+			this.clearTimeout( 'update' );
+			this._paint();
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private _paint() {
+		this.$update_rep = 0;
+
+		let dom = this.dom;
+		if (!this.isVisible() ) {
+			return;
+		}
+
+		//const canvas = this.m_canvas.dom as HTMLCanvasElement;
+		const w = dom.clientWidth;
+		const h = dom.clientHeight;
+
+		const ctx = this.getContext();
+		if (w != this.m_iwidth || h != this.m_iheight) {
+			// adjustment for HDPI
+			let devicePixelRatio = window.devicePixelRatio || 1;
+			let backingStoreRatio = (<any>ctx).webkitBackingStorePixelRatio ||
+				(<any>ctx).mozBackingStorePixelRatio ||
+				(<any>ctx).msBackingStorePixelRatio ||
+				(<any>ctx).oBackingStorePixelRatio ||
+				(<any>ctx).backingStorePixelRatio || 1;
+
+			let canvas = this.canvas;
+
+			if ( this.m_scale != 1.0 ) { //devicePixelRatio !== backingStoreRatio || this.m_scale != 1.0) {
+				let ratio = 1;	//devicePixelRatio / backingStoreRatio,
+				const rw = w * ratio;
+				const rh = h * ratio;
+
+				canvas.setAttribute('width', '' + rw);
+				canvas.setAttribute('height', '' + rh);
+				canvas.setStyleValue('width', w);
+				canvas.setStyleValue('height', h);
+
+				ratio *= this.m_scale;
+				ctx.scale(ratio, ratio);
+			}
+			else {
+				canvas.setAttribute('width', '' + w);
+				canvas.setAttribute('height', '' + h);
+				canvas.setStyleValue('width', w);
+				canvas.setStyleValue('height', h);
+				ctx.scale(1, 1);
+			}
+
+			this.m_iwidth = w;
+			this.m_iheight = h;
+		}
+
+		if (w && h) {
+			let cc = createPainter(ctx, w, h);
+			if (this.props.clear) {
+				
+				cc.clearRect(0,0,w/this.m_scale,h/this.m_scale);
+			}
+
+			cc.save();
+			cc.translate(-0.5, -0.5);
+			this.paint(cc);
+			cc.restore();
+		}
+	}
+
+	protected paint(ctx: CanvasEx ) {
+		try {
+			this.fire('paint', { ctx } );
+		}
+		catch (x) {
+			console.assert(false, x);
+		}
+	}
+}
+