x4js 1.6.5 → 2.0.2

package/src/core/core_dragdrop.ts

@@ -0,0 +1,201 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 './core_tools';
+
+const x_drag_cb = Symbol( 'x-drag-cb' );
+
+interface DropInfo {
+	pt: Point;
+	data: DataTransfer;
+}
+
+type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
+type FilterCallback = ( el: Component ) => boolean;
+
+/**
+ * 
+ */
+
+
+class DragManager {
+
+	dragSource: Component;
+	dragGhost: HTMLElement;
+	dropTarget: Component;
+	
+	notified: Component;
+	
+	timer: any; // pb with name of settimeout return
+
+	/**
+	 * 
+	 */
+
+	registerDraggableElement(el: Component) {
+
+		el.addDOMEvent('dragstart', (ev: DragEvent) => {
+
+			this.dragSource = el;
+			this.dragGhost = el.dom.cloneNode(true) as HTMLElement;
+			
+			this.dragGhost.classList.add('dragged');
+			document.body.appendChild(this.dragGhost);
+
+			el.addClass( 'dragging' );
+
+			ev.dataTransfer.setData('text/string', '1');
+			ev.dataTransfer.setDragImage(new Image(), 0, 0);
+
+			ev.stopPropagation( );
+		});
+
+		el.addDOMEvent('drag', (ev: DragEvent) => {
+			this.dragGhost.style.left = ev.pageX + "px";
+			this.dragGhost.style.top = ev.pageY + "px";
+		});
+
+		el.addDOMEvent('dragend', (ev: DragEvent) => {
+			el.removeClass( 'dragging' );
+			this.dragGhost.remove();
+		});
+
+		el.setAttribute('draggable', "true");
+	}
+
+	/**
+	 * 
+	 */
+
+	registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback ) {
+
+		const dragEnter = (ev: DragEvent) => {
+			if( filterCB && !filterCB(this.dragSource) ) {
+				console.log( 'reject ', el );
+				ev.dataTransfer.dropEffect = 'none';	
+				return;
+			}
+
+			console.log( 'accepted ', el );
+			ev.preventDefault();
+			ev.dataTransfer.dropEffect = 'copy';
+		};
+
+		const dragOver = (ev: DragEvent) => {
+			//console.log( "dragover", ev.target );
+			
+			if( filterCB && !filterCB(this.dragSource) ) {
+				console.log( 'reject ', el );
+				ev.dataTransfer.dropEffect = 'none';	
+				return;
+			}
+			
+			ev.preventDefault();
+									
+			if (this.dropTarget != el) {
+				this.dropTarget = el;
+				this._startCheck();
+			}
+
+			if( this.dropTarget ) {
+				const infos = {
+					pt: { x: ev.pageX, y: ev.pageY },
+					data: ev.dataTransfer,
+				}
+
+				cb( 'drag', this.dragSource, infos );
+			}
+
+			ev.dataTransfer.dropEffect = 'copy';
+		};
+
+		const dragLeave = (ev: DragEvent) => {
+			//console.log( "dragleave", ev.target );
+			this.dropTarget = null;
+			ev.preventDefault();
+		};
+
+		const drop = (ev: DragEvent) => {
+			const infos = {
+				pt: { x: ev.pageX, y: ev.pageY },
+				data: ev.dataTransfer,
+			}
+
+			cb('drop', this.dragSource, infos );
+			
+			this.dropTarget = null;
+			el.removeClass('drop-over');
+
+			ev.preventDefault();
+		}
+
+		el.addDOMEvent('dragenter', dragEnter);
+		el.addDOMEvent('dragover', dragOver);
+		el.addDOMEvent('dragleave', dragLeave);
+		el.addDOMEvent('drop', drop);
+
+		el.setInternalData( x_drag_cb, cb );
+	}
+
+	_startCheck() {
+
+		if (this.timer) {
+			clearInterval(this.timer);
+			this._check( );
+		}
+
+		this.timer = setInterval( () => this._check(), 300 );
+	}
+
+	_check( ) {
+
+		const leaving = ( x: Component ) => {
+			x.removeClass('drop-over');
+
+			const cb = x.getInternalData( x_drag_cb );
+			cb( 'leave', this.dragSource );
+		}
+
+		const entering = ( x: Component ) => {
+			x.addClass('drop-over');
+			const cb = x.getInternalData( x_drag_cb );
+			cb( 'enter', this.dragSource );
+		}
+	
+		if (this.dropTarget) {
+			if (!this.notified || this.notified != this.dropTarget) {
+
+				if( this.notified ) {
+					leaving( this.notified );
+				}
+		
+				this.notified = this.dropTarget;
+				entering( this.notified );
+			}
+		}
+		else {
+			if (this.notified) {
+				leaving( this.notified );
+				this.notified = null;
+
+				clearInterval(this.timer);
+			}
+		}
+	}
+}
+
+export const dragManager = new DragManager();

package/src/core/core_element.ts

@@ -0,0 +1,98 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file core_element.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 { EventMap, EventSource } from './core_events.js';
+
+/**
+ * 
+ */
+
+export class CoreElement<E extends EventMap = EventMap> {
+
+	#events: EventSource<E>;
+	#timers: Map<string, Function>;
+
+	private __startTimer( name: string, ms: number, repeat: boolean, callback: ( ) => void ) {
+		if (!this.#timers) {
+			this.#timers = new Map();
+		}
+		else {
+			this.__stopTimer(name);
+		}
+
+		const id = (repeat ? setInterval : setTimeout)( callback, ms );
+
+		this.#timers.set(name, () => { 
+			(repeat ? clearInterval : clearTimeout)(id); 
+			this.#timers.delete(name) 
+		});
+	}
+
+	private __stopTimer( name: string ) {
+		const clear = this.#timers.get(name);
+		if (clear) { clear(); }
+	}
+
+	setTimeout( name: string, ms: number, callback: () => void ) {
+		this.__startTimer( name, ms, false, callback );
+	}
+
+	clearTimeout( name: string ) {
+		this.__stopTimer( name );
+	}
+
+	setInterval( name: string, ms: number, callback: ( ) => void ) {
+		this.__startTimer( name, ms, true, callback );
+	}
+
+	clearInterval( name: string ) {
+		this.__stopTimer( name );
+	}
+
+	clearTimeouts( ) {
+		for( const [id,val] of this.#timers ) {
+			val( );
+		}
+		
+		this.#timers.clear( );
+	}
+
+	// :: EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+	 * attach to an event
+	 */
+
+	on<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ) {
+		console.assert( listener!==undefined && listener!==null );
+
+		if( !this.#events ) {
+			this.#events = new EventSource( this );
+		}
+		
+		this.#events.addListener( name, listener );
+	}
+
+	/**
+	 * 
+	 */
+
+	fire<K extends keyof E>( name: K, ev: E[K] ) {
+		if( this.#events ) {
+			this.#events.fire( name, ev );
+		}
+	}
+}

package/src/core/core_events.ts

@@ -0,0 +1,149 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file core_events.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 { CoreElement } from './core_element';
+
+/**
+ * 
+ */
+
+export interface CoreEvent {
+	readonly type?: string;			// type of the event 'click', 'change', ...
+	readonly source?: CoreElement;	// object that fires the event
+	readonly context?: any;			// contextual data, left to the user
+
+	propagationStopped?: boolean;	// if true, do not propagate the event
+	defaultPrevented?: boolean;		// if true, do not call default handler (if any)
+
+	stopPropagation?(): void;		// stop the propagation
+	preventDefault?(): void;		// prevent the default handler
+}
+
+// default stopPropagation implementation for Events
+const stopPropagation = function ( this: CoreEvent ) {
+	this.propagationStopped = true;
+}
+
+// default preventDefault implementation for Events
+const preventDefault = function ( this: CoreEvent ) {
+	this.defaultPrevented = true;
+}
+
+
+/**
+ * 
+ */
+
+export interface EventMap {
+}
+
+/**
+ * 
+ */
+
+export type EventCallback<T extends CoreEvent = CoreEvent> = (event: T) => any;
+
+/**
+ * 
+ */
+
+export class EventSource<E extends EventMap = EventMap > {
+
+	private _source: unknown;
+	private _registry: Map<string,EventCallback[]>;
+
+	constructor(source: unknown = null) {
+		this._source = source ?? this;
+	}
+
+	addListener<K extends keyof E>( name: K, callback: ( ev: E[K] ) => void, capturing = false ) {
+		
+		if (!this._registry) {
+			this._registry = new Map();
+		}
+
+		let listeners = this._registry.get(name as string);
+		if (!listeners) {
+			listeners = [];
+			this._registry.set(name as string, listeners);
+		}
+
+		const cb = callback as EventCallback;
+
+		if (listeners.indexOf(cb) == -1) {
+			if (capturing) {
+				listeners.unshift(cb);
+			}
+			else {
+				listeners.push(cb);
+			}
+		}
+	}
+
+	fire<K extends keyof E>(name: K, evx: E[K]) {
+		
+		let listeners = this._registry?.get(name as string);
+		//const defaultHandler = this.m_defaultHandlers?.get(eventName);
+
+		if (listeners && listeners.length) {
+			let ev = evx as CoreEvent;
+			if (!ev) {
+				ev = {};
+			}
+
+			if (!ev.source) {
+				// readonly
+				(ev as any).source = this._source;
+			}
+
+			if (!ev.type) {
+				// readonly
+				(ev as any).type = name;
+			}
+
+			
+			if (!ev.preventDefault) {
+				ev.preventDefault = preventDefault;
+			}
+
+			if (!ev.stopPropagation) {
+				ev.stopPropagation = stopPropagation;
+			}
+
+			// small optimisation
+			if (listeners.length == 1) {
+				listeners[0](ev);
+			}
+			else {
+				const temp = listeners.slice();
+				for (let i = 0, n = temp.length; i < n; i++) {
+					temp[i](ev);
+					if (ev.propagationStopped) {
+						break;
+					}
+				}
+			}
+		}
+
+		//if (defaultHandler && defaultHandler.length && !e.defaultPrevented) {
+		//	return defaultHandler[0](e);
+		//}
+	}
+}
+
+
+
+