x4js 1.6.5 → 2.0.2

package/lib/src/core/core_colors.ts

@@ -0,0 +1,250 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file core_colors.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 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 { clamp, isString } from './core_tools';
+
+
+function hx( v: number ) {
+	const hex = v.toString( 16 );
+	return hex.padStart( 2, '0' );
+}
+
+function round( v: number ) {
+	return Math.round(v);
+}
+
+
+export interface Rgb {
+	red: number;
+	green: number;
+	blue: number;
+	alpha: number;
+}
+
+export interface Hsv {
+	hue: number;
+	saturation: number;
+	value: number;
+	alpha: number;
+}
+
+
+export class Color {
+
+	private rgb: [red:number,green:number,blue:number,alpha:number] = [0,0,0,1];
+	private invalid = false;
+
+	constructor( value: string );
+	constructor( r: number, g: number, b: number, a?: number );
+	constructor( ...args: any[] ) {
+		if( isString(args[0] ) ) {
+			this.setValue(  args[0] );
+		}
+		else {
+			this.setRgb( args[0], args[1], args[2], args[3] );
+		}
+	}
+
+	/**
+	 * accepts:
+	 * 	#aaa
+	 *  #ababab
+	 *  #ababab55
+	 *  rgb(a,b,c)
+	 *  rgba(a,b,c,d)
+	 *  var( --color-5 )
+	 */
+	
+	setValue( value: string ): this {
+
+		this.invalid = false;
+
+		if( value.length==4 && /#[0-9a-fA-F]{3}/.test(value) ) {
+			const r1 = parseInt( value[1], 16 );
+			const g1 = parseInt( value[2], 16 );
+			const b1 = parseInt( value[3], 16 );
+			return this.setRgb( r1<<4|r1, g1<<4|g1, b1<<4|b1, 1.0 );
+		}
+
+		if( value.length==7 && /#[0-9a-fA-F]{6}/.test(value) ) {
+			const r1 = parseInt( value[1], 16 );
+			const r2 = parseInt( value[2], 16 );
+			const g1 = parseInt( value[3], 16 );
+			const g2 = parseInt( value[4], 16 );
+			const b1 = parseInt( value[5], 16 );
+			const b2 = parseInt( value[6], 16 );
+			return this.setRgb( r1<<4|r2, g1<<4|g2, b1<<4|b2, 1.0 );
+		}
+
+		if( value.length==9 && /#[0-9a-fA-F]{8}/.test(value) ) {
+			const r1 = parseInt( value[1], 16 );
+			const r2 = parseInt( value[2], 16 );
+			const g1 = parseInt( value[3], 16 );
+			const g2 = parseInt( value[4], 16 );
+			const b1 = parseInt( value[5], 16 );
+			const b2 = parseInt( value[6], 16 );
+			const a1 = parseInt( value[7], 16 );
+			const a2 = parseInt( value[8], 16 );
+			return this.setRgb( r1<<4|r2, g1<<4|g2, b1<<4|b2, (a1<<4|a2) / 255.0 );
+		}
+
+		if( value.startsWith('rgba') ) {
+			const re = /rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*((\d+)|(\d*\.\d+)|(\.\d+))\s*\)/;
+			const m = re.exec( value );
+			if( m ) {
+				return this.setRgb( parseInt(m[1]), parseInt(m[2]), parseInt(m[3]), parseFloat(m[4]) );
+			}
+		}
+		else if( value.startsWith('rgb') ) {
+			const re = /rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/;
+			const m = re.exec( value );
+			if( m ) {
+				return this.setRgb( parseInt(m[1]), parseInt(m[2]), parseInt(m[3]), 1.0 );
+			}
+		}
+		else if( value.startsWith("var") ) {
+			const re = /var\s*\(([^)]*)\)/;
+			const m = re.exec( value );
+			if( m ) {
+				const expr = m[1].trim( );
+				const style = getComputedStyle( document.documentElement );
+				const value = style.getPropertyValue( expr );
+				return this.setValue( value );
+			}
+		}
+
+		this.invalid = true;
+		return this.setRgb(255,0,0,1);
+	}
+
+	setHsv( h: number, s: number, v: number, a = 1.0 ): this {
+		
+		let i = Math.min(5, Math.floor(h * 6)),
+			f = h * 6 - i,
+			p = v * (1 - s),
+			q = v * (1 - f * s),
+			t = v * (1 - (1 - f) * s);
+
+		let R, G, B;
+
+		switch (i) {
+		case 0:
+			R = v;
+			G = t;
+			B = p;
+			break;
+		case 1:
+			R = q;
+			G = v;
+			B = p;
+			break;
+		case 2:
+			R = p;
+			G = v;
+			B = t;
+			break;
+		case 3:
+			R = p;
+			G = q;
+			B = v;
+			break;
+		case 4:
+			R = t;
+			G = p;
+			B = v;
+			break;
+		case 5:
+			R = v;
+			G = p;
+			B = q;
+			break;
+		}
+
+		return this.setRgb( R*255, G*255, B*255, a );
+	}
+
+
+	setRgb( r: number, g: number, b: number, a: number ): this {
+		this.rgb = [clamp(r,0,255),clamp(g,0,255),clamp(b,0,255),clamp(a,0,1)];
+		return this;
+	}
+
+	toRgbString( withAlpha?: boolean ): string {
+		const _ = this.rgb;
+		return withAlpha===false || _[3]==1 ? `rgb(${round(_[0])},${round(_[1])},${round(_[2])})` : `rgba(${round(_[0])},${round(_[1])},${round(_[2])},${_[3].toFixed(3)})`
+	}
+
+	toHexString( ): string {
+		const _ = this.rgb;
+		return _[3]==1 ? `#(${hx(_[0])},${hx(_[1])},${hx(_[2])})` : `rgba(${hx(_[0])},${hx(_[1])},${hx(_[2])},${hx(_[3]*255)})`
+	}
+
+	toRgb( ): Rgb {
+		const _ = this.rgb;
+		return { red: _[0], green: _[1], blue: _[2], alpha: _[3] };
+	}
+
+	toHsv( ): Hsv {
+		
+		let el = this.toRgb( );
+
+		el.red /= 255.0;
+		el.green /= 255.0;
+		el.blue /= 255.0;
+		
+		const max = Math.max(el.red, el.green, el.blue);
+		const min = Math.min(el.red, el.green, el.blue);
+		const delta = max - min;
+		const saturation = (max === 0) ? 0 : (delta / max);
+		const value = max;
+
+		let hue;
+
+		if (delta === 0) {
+			hue = 0;
+		}
+		else {
+			switch (max) {
+			case el.red:
+				hue = (el.green - el.blue) / delta / 6 + (el.green < el.blue ? 1 : 0);
+				break;
+
+			case el.green:
+				hue = (el.blue - el.red) / delta / 6 + 1 / 3;
+				break;
+
+			case el.blue:
+				hue = (el.red - el.green) / delta / 6 + 2 / 3;
+				break;
+			}
+		}
+
+		return { hue, saturation, value, alpha: el.alpha };
+	}
+
+	getAlpha( ) {
+		return this.rgb[3];
+	}
+
+	setAlpha( a: number ): this {
+		this.rgb[3] = clamp( a, 0, 1 );
+		return this;
+	}
+
+	isInvalid( ) {
+		return this.invalid;
+	}
+}

package/lib/src/{dom_events.ts → core/core_dom.ts}

@@ -1,38 +1,180 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file core_dom.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 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.
+ **/
+
+/** @ignore this events must be defined on domNode (do not bubble) */
+export const unbubbleEvents = {
+	mouseleave: 1, mouseenter: 1, load: 1, unload: 1, scroll: 1, focus: 1, blur: 1, rowexit: 1, beforeunload: 1, stop: 1,
+	dragdrop: 1, dragenter: 1, dragexit: 1, draggesture: 1, dragover: 1, contextmenu: 1, created: 2, removed: 2, sizechange: 2
+};
+
+export type DOMEventHandler = ( ev: Event ) => void;
+type EventEntry = Record<string,DOMEventHandler | DOMEventHandler[]>;
+
+const event_handlers = new WeakMap<Node,EventEntry>( );
+
+/**
+ * handle dom mutations
+ */
+
+let mutObserver: MutationObserver = null;
+
+const observeMutation = (mutations: MutationRecord[], observer: MutationObserver): void => {
+
+	const sendEvent = ( node: Node, code: "created" | "removed" ) => {
+//		console.log( "notify", node, code );
+			
+		const store = event_handlers.get( node );
+		if ( store && store[code] ) {
+			node.dispatchEvent( new Event( code, {} ) );
+		}
+	}
+
+	const notify = ( node: Node, create: boolean ) => {
+
+		if( create ) {
+			sendEvent( node, "created" );
+		}
+
+		for( let c=node.firstChild; c; c=c.nextSibling ) {
+			notify( c, create );
+		}
+
+		if( !create ) {
+			sendEvent( node, "removed" );
+		}
+	}
+
+	
+	for (const mutation of mutations)  {
+		if( mutation.type=="childList" ) {
+			if( mutation.addedNodes ) {
+				mutation.addedNodes.forEach( node => {
+					notify( node, true );
+				} );
+			}
+			
+			if( mutation.removedNodes ) {
+				mutation.removedNodes.forEach( node => {
+					notify( node, false );
+				} );
+			}
+		}
+	}
+}
+
+
+
 /**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @file dom_events.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-export interface X4ElementEventMap extends HTMLElementEventMap {
-	"sizechange": Event;
-	"create": Event;
+ * 
+ */
+
+let sizeObserver: ResizeObserver = null;
+
+function observeSize(entries: ResizeObserverEntry[]) {
+	entries.forEach((entry) => {
+		let dom = entry.target as HTMLElement;
+		if (dom.offsetParent !== null) {
+			dom.dispatchEvent( new Event('resized') );
+		}
+	});
 }
 
-export interface IDOMEvents {
+/**
+ * 
+ */
+
+export function dispatchEvent(ev: Event) {
+
+	let target = ev.target as Node,
+		noup = (unbubbleEvents as any)[ev.type] === 2;
+
+	while (target) {
+		const store = event_handlers.get( target );
+		if ( store ) {
+			const callback = store[ev.type];
+			if( callback ) {
+				if( Array.isArray(callback) ) {
+					callback.some( c => c( ev ) );
+				}	
+				else {
+					callback( ev );
+				}
+
+				if (ev.stopPropagation || ev.defaultPrevented || noup) {
+					break;
+				}
+			}
+		}
+
+		target = target.parentNode;
+
+		// no need to go above
+		if (target == document) {
+			break;
+		}
+	}
+}
+
+/**
+ * 
+ */
+
+export function addEvent( node: Node, name: string, handler: DOMEventHandler, prepend = false ) {
+
+	if( name=="removed" || name=="created" ) {
+		if( !mutObserver ) {
+			mutObserver = new MutationObserver( observeMutation )
+			mutObserver.observe( document.body, {childList: true,subtree: true} );
+		}
+	}
+	else if( name=="resized" ) {
+		if (!sizeObserver) {
+			sizeObserver = new ResizeObserver( observeSize );
+		}
+		
+		sizeObserver.observe( node as Element );
+	}
+
+
+	let store = event_handlers.get( node );
+	if( !store ) {
+		store = {}
+		event_handlers.set( node, store );
+	}
+
+	if( !store[name] ) {
+		store[name] = handler;
+		node.addEventListener( name, dispatchEvent );
+	}
+	else {
+		const entry = store[name];
+		if( Array.isArray(entry) ) {
+			entry.push( handler );
+		}
+		else {
+			store[name] = [entry,handler];
+		}
+	}
+}
+
+/**
+ * 
+ */
+
+export interface GlobalDOMEvents {
 
 	/**
 	 * Fires when the user aborts the download.
@@ -288,10 +430,10 @@ export interface IDOMEvents {
 	 */
 	timeupdate?: (ev: Event) => any;
 	toggle?: (ev: Event) => any;
-	ontouchcancel?: (ev: TouchEvent) => any;
-	ontouchend?: (ev: TouchEvent) => any;
-	ontouchmove?: (ev: TouchEvent) => any;
-	ontouchstart?: (ev: TouchEvent) => any;
+	touchcancel?: (ev: TouchEvent) => any;
+	touchend?: (ev: TouchEvent) => any;
+	touchmove?: (ev: TouchEvent) => any;
+	touchstart?: (ev: TouchEvent) => any;
 	transitioncancel?: (ev: TransitionEvent) => any;
 	transitionend?: (ev: TransitionEvent) => any;
 	transitionrun?: (ev: TransitionEvent) => any;
@@ -310,6 +452,20 @@ export interface IDOMEvents {
 	waiting?: (ev: Event) => any;
 	wheel?: (ev: WheelEvent) => any;
 
-	sizechange?: (ev: Event) => void;	// occurs when size changed
-	create?: ( ev: Event ) => void;		// occurs when inserted in the document.body (dom ok)
-}
+	/**
+	 * custom x4 events
+	 */
+
+	resized?: (ev: Event) => void;			// occurs when size changed
+	created?: ( ev: Event ) => void;		// occurs when inserted in the dom
+	removed?: ( ev: Event ) => void;		// occurs when removed from dom
+}
+
+
+
+
+
+
+
+
+

package/lib/src/{drag_manager.ts → core/core_dragdrop.ts}

@@ -1,36 +1,21 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file drag_manager.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-import { x4document } from './x4dom'
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file core_dragdrop.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 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 { Component } from './component';
-import { Point } from './tools';
+import { Point } from './core_tools';
 
 const x_drag_cb = Symbol( 'x-drag-cb' );
 
@@ -63,13 +48,13 @@ class DragManager {
 
 	registerDraggableElement(el: Component) {
 
-		el.setDomEvent('dragstart', (ev: DragEvent) => {
+		el.addDOMEvent('dragstart', (ev: DragEvent) => {
 
 			this.dragSource = el;
 			this.dragGhost = el.dom.cloneNode(true) as HTMLElement;
 			
 			this.dragGhost.classList.add('dragged');
-			x4document.body.appendChild(this.dragGhost);
+			document.body.appendChild(this.dragGhost);
 
 			el.addClass( 'dragging' );
 
@@ -79,12 +64,12 @@ class DragManager {
 			ev.stopPropagation( );
 		});
 
-		el.setDomEvent('drag', (ev: DragEvent) => {
+		el.addDOMEvent('drag', (ev: DragEvent) => {
 			this.dragGhost.style.left = ev.pageX + "px";
 			this.dragGhost.style.top = ev.pageY + "px";
 		});
 
-		el.setDomEvent('dragend', (ev: DragEvent) => {
+		el.addDOMEvent('dragend', (ev: DragEvent) => {
 			el.removeClass( 'dragging' );
 			this.dragGhost.remove();
 		});
@@ -128,7 +113,7 @@ class DragManager {
 
 			if( this.dropTarget ) {
 				const infos = {
-					pt: new Point( ev.pageX, ev.pageY ),
+					pt: { x: ev.pageX, y: ev.pageY },
 					data: ev.dataTransfer,
 				}
 
@@ -146,7 +131,7 @@ class DragManager {
 
 		const drop = (ev: DragEvent) => {
 			const infos = {
-				pt: new Point( ev.pageX, ev.pageY ),
+				pt: { x: ev.pageX, y: ev.pageY },
 				data: ev.dataTransfer,
 			}
 
@@ -158,12 +143,12 @@ class DragManager {
 			ev.preventDefault();
 		}
 
-		el.setDomEvent('dragenter', dragEnter);
-		el.setDomEvent('dragover', dragOver);
-		el.setDomEvent('dragleave', dragLeave);
-		el.setDomEvent('drop', drop);
+		el.addDOMEvent('dragenter', dragEnter);
+		el.addDOMEvent('dragover', dragOver);
+		el.addDOMEvent('dragleave', dragLeave);
+		el.addDOMEvent('drop', drop);
 
-		el.setData( x_drag_cb, cb );
+		el.setInternalData( x_drag_cb, cb );
 	}
 
 	_startCheck() {
@@ -181,13 +166,13 @@ class DragManager {
 		const leaving = ( x: Component ) => {
 			x.removeClass('drop-over');
 
-			const cb = x.getData( x_drag_cb );
+			const cb = x.getInternalData( x_drag_cb );
 			cb( 'leave', this.dragSource );
 		}
 
 		const entering = ( x: Component ) => {
 			x.addClass('drop-over');
-			const cb = x.getData( x_drag_cb );
+			const cb = x.getInternalData( x_drag_cb );
 			cb( 'enter', this.dragSource );
 		}