x4js 2.0.13 → 2.0.14

package/lib/src/core/core_dragdrop.ts

@@ -25,7 +25,7 @@ interface DropInfo {
 }
 
 type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
-type FilterCallback = ( el: Component ) => boolean;
+type FilterCallback = ( el: Component, data: DataTransfer ) => boolean;
 
 /**
  * 
@@ -84,7 +84,7 @@ class DragManager {
 	registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback ) {
 
 		const dragEnter = (ev: DragEvent) => {
-			if( filterCB && !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource,ev.dataTransfer) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
@@ -98,7 +98,7 @@ class DragManager {
 		const dragOver = (ev: DragEvent) => {
 			//console.log( "dragover", ev.target );
 			
-			if( filterCB && !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource,ev.dataTransfer) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;

package/lib/src/core/core_element.ts

@@ -42,7 +42,7 @@ export class CoreElement<E extends EventMap = EventMap> {
 	}
 
 	private __stopTimer( name: string ) {
-		const clear = this.#timers.get(name);
+		const clear = this.#timers?.get(name);
 		if (clear) { clear(); }
 	}
 
@@ -86,6 +86,18 @@ export class CoreElement<E extends EventMap = EventMap> {
 		this.#events.addListener( name, listener );
 	}
 
+	/**
+	 * detach
+	 */
+
+	off<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ) {
+		console.assert( listener!==undefined && listener!==null );
+
+		if( this.#events ) {
+			this.#events.removeListener( name, listener );
+		}
+	}
+
 	/**
 	 * 
 	 */

package/lib/src/core/core_events.ts

@@ -91,6 +91,34 @@ export class EventSource<E extends EventMap = EventMap > {
 				listeners.push(cb);
 			}
 		}
+
+		return ( ) => {
+			this.removeListener( name, callback );
+		}
+	}
+
+	/**
+	 * stop listening to an event
+	 * @param eventName - event name
+	 * @param callback - callback to remove (must be the same as in on )
+	 */
+
+	removeListener<K extends keyof E>(name: K, callback: (ev: E[K]) => any) {
+		
+		if (!this._registry ) {
+			return;
+		}
+
+		let listeners = this._registry.get(name as string);
+		if (!listeners) {
+			return;
+		}
+
+		const cb = callback as EventCallback;
+		const idx = listeners.indexOf(cb);
+		if (idx !== -1) {
+			listeners.splice(idx, 1);
+		}
 	}
 
 	fire<K extends keyof E>(name: K, evx: E[K]) {

package/lib/src/core/core_i18n.ts

@@ -303,7 +303,15 @@ let fr = {
 
 		copy: 'Copier',
 		cut: 'Couper',
-		paste: 'Coller'
+		paste: 'Coller',
+
+		filedrop: 'Déposez un fichier',
+
+		keyboard: {
+			next: 'Suivant',
+			numeric: '123',
+			alpha: 'Abc'
+		},
 	}
 };
 
@@ -359,7 +367,15 @@ let en = {
 
 		copy: 'Copy',
 		cut: 'Cut',
-		paste: 'Paste'
+		paste: 'Paste',
+
+		filedrop: 'Drop a file',
+
+		keyboard: {
+			next: 'Next',
+			numeric: '123',
+			alpha: 'Abc'
+		},
 	}
 };
 

package/lib/src/core/core_react.ts

@@ -0,0 +1,79 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file core_react.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.
+ *
+ * to use you must:
+ * 
+ * 1. add this to your tsconfig.json
+ * 		"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>
+ * 
+ */
+
+import { Component } from './component.js';
+import { Constructor, isString } from './core_tools.js';
+
+
+/**
+ * x4 is reactive ?
+ * hard jsx :)
+ */
+
+export class x4_react {
+
+	static create_element( tag: string, props: any, ...content: any[] ): Component;
+	static create_element<X extends Component>( tag: string | Constructor<X>, props: X["props"], ...content: any[] ) {
+		
+		props = props || {};
+
+		let el: Component;
+
+		// --- simple div ------------------------
+		if( isString(tag) ) {
+			el = new Component( { tag } );
+			Object.entries( props )
+				.forEach(([name, value]) => {
+					if (name.startsWith('on') && name.toLowerCase() in window) {
+						el.dom.addEventListener(name.toLowerCase().substring(2), value)
+					}
+					else {
+						el.setAttribute(name, value )
+					}
+				});
+		}
+		// --- Component ------------------------
+		else {
+			el = new tag( props );
+		}
+
+		if( content && content.length ) {
+			el.appendContent( content );
+		}
+
+		return el;
+	}
+}

package/lib/src/core/core_router.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { EvError } from './component.js';
+import { EvChange, EvError } from './component.js';
 import { EventMap, EventSource } from './core_events.js';
 
 type RouteHandler = ( params: any, path: string ) => void;
@@ -30,7 +30,7 @@ interface Route {
 	handler: RouteHandler;
 }
 
-function parseRoute(str: string | RegExp, loose = false): Segment {
+export function parseRoute(str: string | RegExp, loose = false): Segment {
 
 	if (str instanceof RegExp) {
 		return {
@@ -77,6 +77,7 @@ function parseRoute(str: string | RegExp, loose = false): Segment {
 }
 
 interface RouterEvents extends EventMap {
+	change: EvChange;
 	error: EvError;
 }
 
@@ -116,7 +117,7 @@ export class Router extends EventSource< RouterEvents > {
 
 		this.m_routes = [];
 		this.m_useHash = useHash;
-
+		
 		window.addEventListener('popstate', (event) => {
 			const url = this._getLocation( );
 			const found = this._find(url);
@@ -124,6 +125,8 @@ export class Router extends EventSource< RouterEvents > {
 			found.handlers.forEach(h => {
 				h(found.params,url);
 			});
+
+			this.fire( "change", { value: this._getLocation() } );
 		});
 	}
 
@@ -140,6 +143,10 @@ export class Router extends EventSource< RouterEvents > {
 		return this.m_useHash ? '/'+document.location.hash.substring(1) : document.location.pathname;
 	}
 
+	/**
+	 * 
+	 */
+
 	navigate( uri: string, notify = true, replace = false ) {
 
 		if( !uri.startsWith('/') ) {
@@ -152,7 +159,7 @@ export class Router extends EventSource< RouterEvents > {
 			//window.history.pushState({}, '', 'error')
 			console.log( 'route not found: '+uri );
 			this.fire( "error", {code: 404, message: "route not found" } );
-			return;
+			return false;
 		}
 
 		if( this.m_useHash ) {
@@ -171,12 +178,21 @@ export class Router extends EventSource< RouterEvents > {
 		}
 
 		if( notify ) {
-			found.handlers.forEach( h => {
-				h( found.params, uri );
-			} );
+			//found.handlers.forEach( h => {
+			//	h( found.params, uri );
+			//} );
+			
+			found.handlers[0]( found.params, uri );
 		}
+
+		this.fire( "change", { value: this._getLocation() } );
+		return true;
 	}
 
+	/**
+	 * 
+	 */
+
 	private _find( url: string ): { params: Record<string,any>, handlers: RouteHandler[] } {
 		
 		let matches = [];

package/lib/src/core/core_styles.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { pascalCase, isString } from './core_tools.js';
+import { isString } from './core_tools.js';
 
 export const unitless: Record<string,1> = {
 	animationIterationCount: 1,
@@ -82,8 +82,8 @@ export function isUnitLess( name: string ) {
 
 export class Stylesheet {
 
-	private m_sheet: CSSStyleSheet;
-	private m_rules: Map<string, number> = new Map( );
+	readonly m_sheet: CSSStyleSheet;
+	readonly m_rules: Map<string, number> = new Map( );
 
 	constructor() {
 		
@@ -91,7 +91,7 @@ export class Stylesheet {
 			for(let i=0; i<document.styleSheets.length; i++) {
 			  	let sheet = document.styleSheets[i];
 			  	if(sheet.title === name ) {
-					return <CSSStyleSheet>sheet;
+					return sheet;
 			  	}
 			}
 		}
@@ -101,7 +101,7 @@ export class Stylesheet {
 			const dom = document.createElement( 'style' );
 			dom.setAttribute('id', 'x4-dynamic-css' );
 			document.head.appendChild(dom);
-			this.m_sheet = <CSSStyleSheet>dom.sheet
+			this.m_sheet = dom.sheet
 		}
 	}
 

package/lib/src/core/core_svg.ts

@@ -69,10 +69,28 @@ class SvgItem {
 		this._dom = document.createElementNS("http://www.w3.org/2000/svg", tag ); 
 	}
 
+	/**
+	 * @returns the svh element dom
+	 */
+
 	getDom( ) {
 		return this._dom;
 	}
 
+	/**
+	 * 
+	 */
+
+	reset( ) {
+		const attrs = this._dom.attributes;
+		for (let i = attrs.length - 1; i >= 0; i--) {
+			this._dom.removeAttribute(attrs[i].name);
+		}
+
+		return this;
+	}
+
+
 	/**
 	 * change the stroke color
 	 * @param color 
@@ -126,6 +144,18 @@ class SvgItem {
 		return this;
 	}
 
+	/**
+	 * return the given attribute if any 
+	 */
+
+	getAttr( name: string ) : string {
+		return this._dom.getAttribute( name );
+	}
+
+	getNumAttr( name: string ) {
+		return parseInt( this._dom.getAttribute( name ) );
+	}
+
 	/**
 	 * define a new attribute
 	 * @param name attibute name
@@ -165,7 +195,7 @@ class SvgItem {
 	 * @param name class name to add 
 	 */
 	
-	addClass( cls: string ) {
+	addClass( cls: string ): this {
 		if( !cls ) return;
 		
 		if( cls.indexOf(' ')>=0 ) {
@@ -175,6 +205,27 @@ class SvgItem {
 		else {
 			this._dom.classList.add(cls);
 		}
+
+		return this;
+	}
+
+	/**
+	 * remove a class
+	 * @param name class name to remove
+	 */
+	
+	removeClass( cls: string ): this {
+		if( !cls ) return;
+		
+		if( cls.indexOf(' ')>=0 ) {
+			const ccs = cls.split( " " );
+			this._dom.classList.remove(...ccs);
+		}
+		else {
+			this._dom.classList.remove(cls);
+		}
+
+		return this;
 	}
 
 	/**
@@ -191,7 +242,13 @@ class SvgItem {
 	 */
 
 	transform( tr: string ): this {
-		this.setAttr( "transform", tr );
+		const t = this.getAttr( "transform" ) ?? "";
+		this.setAttr( "transform", t+' '+tr );
+		return this;
+	}
+
+	clear_transform( ) {
+		this.setAttr( "transform", null );
 		return this;
 	}
 
@@ -243,6 +300,12 @@ export class SvgPath extends SvgItem {
 		return this;
 	}
 
+	reset( ) {
+		this._path = "";
+		super.reset( );
+		return this;
+	}
+
 	/**
 	 * move the current pos
 	 * @param x new pos x
@@ -267,6 +330,16 @@ export class SvgPath extends SvgItem {
 		return this._update( );
 	}
 
+	/**
+	 * draw a curve
+	 */
+
+	curveTo( x1: number, y1: number, x2: number, y2: number, x3: number, y3: number ) {
+		this._path += clean`C${x1},${y1} ${x2},${y2} ${x3},${y3}`;
+		return this._update( );
+	}
+
+
 	/**
 	 * close the currentPath
 	 */
@@ -286,13 +359,13 @@ export class SvgPath extends SvgItem {
 	 * @returns this
 	 */
 
-	arc( x: number, y: number, r: number, start: number, end: number ): this {
+	arc( x: number, y: number, r: number, start: number, end: number, clockwise= true ): this {
 
 		const st = p2c( x, y, r, start-90 );
 		const en = p2c( x, y, r, end-90 );
 
-		const flag = end - start <= 180 ? "0" : "1";
-		this._path += clean`M${st.x},${st.y}A${r},${r} 0 ${flag} 1 ${en.x},${en.y}`;
+		const flag = ((end-start) <= 180 ? "0" : "1");
+		this._path += clean`M${st.x},${st.y}A${r},${r} 0 ${flag} ${(clockwise ? '1' : '0')} ${en.x},${en.y}`;
 		
 		return this._update( );
 	}
@@ -353,6 +426,42 @@ export class SvgText extends SvgItem {
 	}
 }
 
+/**
+ * 
+ */
+
+export class SvgIcon extends SvgItem {
+	constructor( svg: string ) {
+		super( "svg" );
+
+		if( svg.startsWith("data:image/svg+xml,") ) {
+			svg = svg.substring( 19 );
+		}
+
+		const parser = new DOMParser();
+		const doc = parser.parseFromString( decodeURIComponent(svg), "image/svg+xml");
+
+		const parserErrorElement = doc.querySelector("parsererror");
+		if( parserErrorElement ) {
+			console.error( "error while parsing svg:\n"+ parserErrorElement.textContent );
+		}
+
+		const svgRoot = doc.documentElement; // The <svg> element from the string
+		for( let i=0; i<svgRoot.attributes.length; i++) {
+			this._dom.setAttribute( svgRoot.attributes[i].name, svgRoot.attributes[i].value );
+		}
+
+		for( let i=0; i<svgRoot.childNodes.length; i++) {
+			const child = svgRoot.childNodes[i];
+			if (child.nodeType === 1) { 
+				this._dom.appendChild(child);
+			} 
+		}
+	}
+}
+
+
+
 /**
  * 
  */
@@ -420,6 +529,12 @@ export class SvgGroup extends SvgItem {
 		return item;
 	}
 
+	appendItems<K extends SvgItem>( items: K[] )  {
+		items.forEach( item => {
+			this._dom.appendChild( item.getDom() );
+		} );
+	}
+
 	/**
 	 * 
 	 */
@@ -434,7 +549,7 @@ export class SvgGroup extends SvgItem {
 		return this.append( text );
 	}
 
-	ellipse( x: number, y: number, r1: number, r2 = r1 ): SvgShape {
+	ellipse( x: number, y: number, r1: number, r2: number ): SvgShape {
 		const shape = new SvgShape( 'ellipse' );
 		shape.setAttr( 'cx', num(x)+'' );
 		shape.setAttr( 'cy', num(y)+'' );
@@ -443,6 +558,24 @@ export class SvgGroup extends SvgItem {
 		return this.append( shape );
 	}
 
+	circle( x: number, y: number, r1: number ): SvgShape {
+		const shape = new SvgShape( 'ellipse' );
+		shape.setAttr( 'cx', num(x)+'' );
+		shape.setAttr( 'cy', num(y)+'' );
+		shape.setAttr( 'rx', num(r1)+'' );
+		shape.setAttr( 'ry', num(r1)+'' );
+		return this.append( shape );
+	}
+
+	icon( svg: string, x: number, y: number, w: number, h: number ): SvgIcon {
+		const icon = new SvgIcon( svg );
+		icon.setAttr( 'x', num(x)+'' );
+		icon.setAttr( 'y', num(y)+'' );
+		icon.setAttr( 'width', num(w)+'' );
+		icon.setAttr( 'height', num(h)+'' );
+		return this.append( icon );
+	}
+
 	rect( x: number, y: number, w: number, h: number ): SvgShape {
 
 		if( h<0 ) {
@@ -458,8 +591,12 @@ export class SvgGroup extends SvgItem {
 		return this.append( shape );
 	}
 
-	group( ) {
+	group( id?: string ) {
 		const group = new SvgGroup( );
+		if( id ) {
+			group.setAttr( 'id', id );
+		}
+
 		return this.append( group );
 	}
 
@@ -500,20 +637,35 @@ export class SvgGroup extends SvgItem {
 
 export class SvgBuilder extends SvgGroup {
 	private static g_clip_id = 1;
+	private static g_pat_id = 1;
 	
 	constructor( ) {
 		super(  );
 	}
 
 	addClip( x: number, y: number, w: number, h: number ) {
-        
-		const id = 'c-'+SvgBuilder.g_clip_id++;
+		const id = 'clip-'+SvgBuilder.g_clip_id++;
 		const clip = new SvgGroup( 'clipPath' );
 		clip.setAttr('id', id );
 		clip.rect( x, y, w, h );
 
 		this.append(clip);
-        return id;
+        return {id,clip};
+    }
+
+	addPattern( x: number, y: number, w: number, h: number ) {
+		const id = 'pat-'+SvgBuilder.g_pat_id++;
+
+		const pat = new SvgGroup( 'pattern' );
+		pat.setAttr( 'id', id );
+		pat.setAttr( 'x', num(x)+'' );
+		pat.setAttr( 'y', num(y)+'' );
+		pat.setAttr( 'width', num(w)+'' );
+		pat.setAttr( 'height', num(h)+'' );
+		pat.setAttr( 'patternUnits', "userSpaceOnUse" );
+
+		this.append(pat);
+		return {id,pat};
     }
 }
 
@@ -525,7 +677,7 @@ export class SvgBuilder extends SvgGroup {
 
 interface SvgProps extends ComponentProps {
 	viewbox?: string;
-	svg?: SvgBuilder;
+	svg: SvgBuilder;
 }
 
 /**
@@ -540,11 +692,20 @@ export class SvgComponent<P extends SvgProps = SvgProps> extends Component<P> {
 		this.setAttribute( 'xmlns', SVG_NS );
 
 		if( props.viewbox ) {
-			this.setAttribute( "viewbox", props.viewbox );
+			this.setAttribute( "viewBox", props.viewbox );
 		}
 
 		if( props.svg ) {
 			this.dom.appendChild( props.svg.getDom() );
 		}
 	}
+
+	setSvg( bld: SvgBuilder ) {
+		this.clearContent( );
+		this.dom.appendChild( bld.getDom() );
+	}
+
+	addItems( ...items: SvgItem[] ) {
+		items.forEach( item => this.dom.appendChild( item.getDom() ) );
+	}
 }