x4js 1.5.18 → 1.5.20

package/lib/src/base64.ts

@@ -0,0 +1,166 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file base64.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 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.
+**/
+
+const _alphabet: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+let _lookup: any = null;
+
+
+export class Base64 {
+	lookup: any = null;
+
+	static encode(s: string | Uint8Array ) {
+		let buffer;
+
+		if( s instanceof Uint8Array ) {
+			buffer = []
+			s.forEach( (v) => {
+				buffer.push( v );
+			});
+		}
+		else {
+			buffer = Base64._toUtf8(s);
+		}
+
+		let position = -1;
+		let len = buffer.length;
+		let nan1, nan2;
+		let enc = [, , ,];
+
+		let result = '';
+		while (++position < len) {
+			nan1 = buffer[position + 1], nan2 = buffer[position + 2];
+			enc[0] = buffer[position] >> 2;
+			enc[1] = ((buffer[position] & 3) << 4) | (buffer[++position] >> 4);
+
+			if (isNaN(nan1)) {
+				enc[2] = enc[3] = 64;
+			}
+			else {
+				enc[2] = ((buffer[position] & 15) << 2) | (buffer[++position] >> 6);
+				enc[3] = (isNaN(nan2)) ? 64 : buffer[position] & 63;
+			}
+
+			result += _alphabet[enc[0]] + _alphabet[enc[1]] + _alphabet[enc[2]] + _alphabet[enc[3]];
+		}
+
+		return result;
+	}
+
+	static decode(s: string) {
+		let buffer = Base64._fromUtf8(s);
+
+		let position = 0;
+		let len = buffer.length;
+
+		let result = '';
+		while (position < len) {
+			if (buffer[position] < 128) {
+				result += String.fromCharCode(buffer[position++]);
+			}
+			else if (buffer[position] > 191 && buffer[position] < 224) {
+				result += String.fromCharCode(((buffer[position++] & 31) << 6) | (buffer[position++] & 63));
+			}
+			else {
+				result += String.fromCharCode(((buffer[position++] & 15) << 12) | ((buffer[position++] & 63) << 6) | (buffer[position++] & 63));
+			}
+		}
+
+		return result;
+	}
+
+	private static _toUtf8(s) {
+		let position = -1;
+		let len = s.length;
+
+		let chr;
+		let buffer = [];
+
+		if (/^[\x00-\x7f]*$/.test(s)) {
+			while (++position < len) {
+				buffer.push(s.charCodeAt(position));
+			}
+		}
+		else {
+			while (++position < len) {
+				chr = s.charCodeAt(position);
+				if (chr < 128) {
+					buffer.push(chr);
+				}
+				else if (chr < 2048) {
+					buffer.push((chr >> 6) | 192, (chr & 63) | 128);
+				}
+				else {
+					buffer.push((chr >> 12) | 224, ((chr >> 6) & 63) | 128, (chr & 63) | 128);
+				}
+			}
+		}
+
+		return buffer;
+	}
+
+	private static _fromUtf8(s) {
+		let position = -1;
+		let len;
+		let buffer = [];
+		let enc = [, , ,];
+
+		if (!_lookup) {
+			len = _alphabet.length;
+			_lookup = {};
+			while (++position < len) {
+				_lookup[_alphabet[position]] = position;
+			}
+
+			position = -1;
+		}
+
+		len = s.length;
+		while (position < len) {
+			enc[0] = _lookup[s.charAt(++position)];
+			enc[1] = _lookup[s.charAt(++position)];
+			buffer.push((enc[0] << 2) | (enc[1] >> 4));
+
+			enc[2] = _lookup[s.charAt(++position)];
+			if (enc[2] == 64) {
+				break;
+			}
+
+			buffer.push(((enc[1] & 15) << 4) | (enc[2] >> 2));
+			enc[3] = _lookup[s.charAt(++position)];
+
+			if (enc[3] == 64) {
+				break;
+			}
+
+			buffer.push(((enc[2] & 3) << 6) | enc[3]);
+		}
+
+		return buffer;
+	}
+}

package/lib/src/base_component.ts

@@ -0,0 +1,152 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file base_component.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 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 { EventMap, MapEvents, EventSource, EvTimer } from './x4events';
+
+/**
+ * Timer Callback
+ * @see EvTimer, startTimer, stopTimer
+ */
+
+ interface TimerCallback {
+	(name: string, time: number): void;
+}
+
+/**
+ * BaseComponent EventMap
+ */
+
+export interface BaseComponentEventMap extends EventMap {
+	timer: EvTimer,
+}
+
+/**
+ * BaseCompoment Properties
+ */
+
+export interface BaseComponentProps<T = BaseComponentEventMap> {
+	events?: MapEvents<T>;	// basic component event map in base interface, should specialised in derived interfaces
+	[key: string]: any; // added index signature to solve "Type 'X' has no properties with type 'Y'" 
+}
+
+/**
+ * BaseComponent class
+ */
+
+export class BaseComponent< P extends BaseComponentProps<BaseComponentEventMap>, E extends BaseComponentEventMap >
+	extends EventSource< E > {
+
+	protected m_props: P;
+	#m_timers: Map<string, Function>;
+
+	constructor(props: P) {
+		super();
+
+		//this.m_props = { ...props };
+		this.m_props = props;
+
+		if (props.events) {
+			this.listen(props.events as EventMap);
+		}
+	}
+
+	/**
+	 * start a new timer
+	 * @param name timer name 
+	 * @param timeout time out in ms
+	 * @param repeat if true this is an auto repeat timer
+	 * @param callback if !null, the callback to call else a EvTimer is fired
+	 */
+
+	startTimer(name: string, timeout: number, repeat = true, callback: TimerCallback = null) {
+		if (!this.#m_timers) {
+			this.#m_timers = new Map();
+		}
+		else {
+			this.stopTimer(name);
+		}
+
+		const id = (repeat ? setInterval : setTimeout)((tm: number) => {
+			if (callback) {
+				callback(name, tm);
+			}
+			else {
+				this.emit('timer', EvTimer( name, tm ));
+			}
+		}, timeout);
+
+		this.#m_timers.set(name, () => { (repeat ? clearInterval : clearTimeout)(id) });
+	}
+
+	/**
+	 * stop the given timer
+	 * @param name 
+	 */
+
+	stopTimer(name: string) {
+		const clear = this.#m_timers.get(name);
+		if (clear) { clear(); }
+	}
+
+	/**
+	 * stop all timers
+	 */
+
+	disposeTimers( ) {
+		this.#m_timers?.forEach( v => v() );
+		this.#m_timers = undefined;
+	}
+
+	/**
+	 * 
+	 * @param callback 
+	 * @param timeout 
+	 */
+
+	singleShot( callback: TimerCallback, timeout = 0 ) {
+		setTimeout( callback, timeout );
+	}
+
+	/**
+	 * 
+	 * @param props 
+	 * @param elements 
+	 */
+	
+	public mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
+		elements.forEach( name => {
+			const n = name as string;
+			if (props[n]) {
+				this._on(n, props[n]);
+			}
+		})
+	}
+}
+

package/lib/src/button.ts

@@ -0,0 +1,355 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file button.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 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 { Component, CProps, CEventMap, HtmlString } from './component'
+import { EventCallback, EvClick, EvChange } from './x4events'
+
+import { Action } from './action'
+import { Icon, IconID } from './icon'
+import { Label } from './label'
+import { Menu, MenuItem, MenuOrSep } from './menu'
+import { isFunction } from './tools'
+
+/**
+ * Button events
+ */
+
+interface ButtonEventMap extends CEventMap {
+	click: EvClick;
+}
+
+type MenuCallBack = () => MenuOrSep[];
+
+/**
+ * Button properties
+ */
+
+interface ButtonProps<E extends ButtonEventMap = ButtonEventMap> extends CProps<E> {
+	text?: string | HtmlString;	// initial button text
+	icon?: IconID;	// optional icon id
+	rightIcon?: IconID;	// optional icon id
+	align?: 'center' | 'left' | 'right';	// text alignment
+	autoRepeat?: number; // time in ms or 0/undefined for none
+	menu?: MenuOrSep[] | MenuCallBack;
+	click?: EventCallback<EvClick>;	// shortcut to events: { click: ... }
+
+	action?: Action;
+}
+
+
+/**
+ * Base button
+ */
+
+export class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEventMap = ButtonEventMap> extends Component<P, E> {
+
+	constructor(props: P) {
+		super(props);
+
+		this.setTag( 'button');
+
+		this.setDomEvent('click', (e) => this._handleClick(e));
+		this.setDomEvent('mousedown', () => { this._startAutoRep(true) });
+		this.setDomEvent('mouseup', () => { this._startAutoRep(false) });
+		this.setDomEvent('keydown', (e) => this._handleKeyDown(e));
+
+		this.mapPropEvents( props, 'click' );		
+	}
+
+	render(props: ButtonProps) {
+
+		const action = props.action;
+		
+		let icon = props.icon;
+		let text = props.text;
+		
+		if( action ) {
+			if( !icon && action.props.icon ) {
+				icon = action.props.icon;
+			}
+
+			if( text===undefined && action.props.text ) {
+				text = action.props.text;
+			}
+		}
+
+		const ui_icon = icon ? new Icon({ icon, cls: 'left', ref: 'l_icon' }) : null;
+		const ui_label = new Label({ flex: 1, text: text ?? '', align: props.align, ref: 'label' });
+		const ui_ricon = props.rightIcon ? new Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
+
+		if( text===undefined ) {
+			ui_label.addClass( "@hidden" );
+		}
+		
+		this.setContent([ui_icon, ui_label, ui_ricon]);
+		this._setTabIndex(props.tabIndex);
+	}
+
+	/**
+	 * starts/stops the autorepeat
+	 */
+
+	private _startAutoRep(start: boolean) {
+
+		if (!this.m_props.autoRepeat) {
+			return;
+		}
+
+		if (start) {
+			// 1st timer 1s
+			this.startTimer('repeat', 700, false, () => {
+				// auto click
+				this.startTimer('repeat', this.m_props.autoRepeat, true, this._sendClick);
+			});
+		}
+		else {
+			this.stopTimer('repeat');
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	protected _handleKeyDown(ev: KeyboardEvent) {
+		if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey) {
+			if (ev.key == 'Enter' || ev.key == ' ') {
+				this._sendClick();
+				ev.preventDefault();
+				ev.stopPropagation();
+			}
+		}
+	}
+
+	/**
+	 * called by the system on click event
+	 */
+
+	protected _handleClick(ev: MouseEvent) {
+
+		if (this.m_props.menu) {
+			let menu = new Menu({
+				items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+			});
+
+			let rc = this.getBoundingRect();
+			menu.displayAt(rc.left, rc.bottom, 'tl');
+		}
+		else {
+			this._sendClick();
+		}
+
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+
+	/**
+	 * sends a click to the observers
+	 */
+
+	protected _sendClick() {
+		if (this.m_props.menu) {
+			let menu = new Menu({
+				items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+			});
+
+			let rc = this.getBoundingRect();
+			menu.displayAt(rc.left, rc.bottom, 'tl');
+		}
+		else {
+			this.emit('click', EvClick());
+			if( this.m_props.action ) {
+				this.m_props.action.fire( );
+			}
+		}
+	}
+
+	/**
+	 * change the button text
+	 * @example
+	 * ```ts
+	 * let btn = new Button( {
+	 * 	text: 'hello'
+	 * });
+	 * 
+	 * btn.text = 'world';
+	 * ```
+	 */
+
+	public set text(text: string | HtmlString) {
+		this.m_props.text = text;
+
+		let label = this.itemWithRef<Label>('label');
+		if (label) { label.text = text; label.removeClass("@hidden") }
+	}
+
+	public get text(): string | HtmlString {
+		let label = this.itemWithRef<Label>('label');
+		return label?.text;
+	}
+
+	/**
+	 * change the button icon
+	 * todo: do nothing if no icon defined at startup
+	 *
+	 * @example
+	 * ```ts
+	 * let btn = new Button( {
+	 * 	text: 'hello',
+	 *  icon: 'close'
+	 * });
+	 * btn.setIcon( 'open' );
+	 * ```
+	 */
+
+	public set icon(icon: IconID) {
+		this.m_props.icon = icon;
+
+		let ico = this.itemWithRef<Icon>('l_icon');
+		if (ico) {
+			ico.icon = icon;
+		}
+		else {
+			this.update( );
+		}
+	}
+
+	public get icon() {
+		let ico = this.itemWithRef<Icon>('l_icon');
+		return ico?.icon;
+	}
+
+	/**
+	 * change the button right icon
+	 * todo: do nothing if no icon defined at startup
+	 *
+	 * @example
+	 * ```ts
+	 * let btn = new Button( {
+	 * 	text: 'hello',
+	 *  icon: 'close'
+	 * });
+	 * btn.setIcon( 'open' );
+	 * ```
+	 */
+
+	public set rightIcon(icon: IconID) {
+		this.m_props.rightIcon = icon;
+		let ico = this.itemWithRef<Icon>('r_icon');
+		if (ico) {
+			ico.icon = icon;
+		}
+	}
+
+	public get rightIcon() {
+		let ico = this.itemWithRef<Icon>('l_icon');
+		return ico?.icon;
+	}
+
+	/**
+	 * 
+	 */
+	
+	set menu( items: MenuItem[] ) {
+		this.m_props.menu = items;
+	}
+}
+
+// :: BUTTON ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+/**
+ * 
+ */
+
+export class Button extends BaseButton<ButtonProps> {
+}
+
+// :: TOGGLE BUTTON ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+interface ToggleButtonEventMap extends ButtonEventMap {
+	change: EvChange;
+}
+
+interface ToggleButtonProps extends ButtonProps<ToggleButtonEventMap> {
+	checked: boolean;
+	checkedIcon?: IconID;
+}
+
+/**
+ * 
+ */
+
+export class ToggleButton extends BaseButton<ToggleButtonProps, ToggleButtonEventMap> {
+
+	constructor(props: ToggleButtonProps) {
+		super(props);
+	}
+
+	/**
+	 * 
+	 */
+
+	render(props: ToggleButtonProps) {
+		super.render(props);
+
+		if (props.checked) {
+			this.addClass('checked');
+			this._updateIcon( );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	protected _sendClick() {
+		super._sendClick();
+
+		this.m_props.checked = !this.m_props.checked;
+		this.setClass('checked', this.m_props.checked);
+		this.emit('change', EvChange(this.m_props.checked));
+
+		this._updateIcon( );
+	}
+
+	private _updateIcon( ) {
+		if( this.m_props.checkedIcon ) {
+			const ic = this.m_props.checked ? this.m_props.checkedIcon : this.m_props.icon;
+			let ico = this.itemWithRef<Icon>('l_icon');
+			if (ico) {
+				ico.icon = ic;
+			}
+		}
+	}
+}
+
+
+