x4js 1.4.43 → 1.4.46

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.43",
+	"version": "1.4.46",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/action.ts

@@ -27,10 +27,10 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { BasicEvent } from './x4events'
+import { BasicEvent, EvChange } from './x4events'
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component'
 import { IconID } from "./icon"
-import { EvChange, EventHandler } from 'x4js';
+import { EventHandler } from './component';
 
 //TODO: implement all
 

package/src/application.ts

@@ -30,11 +30,9 @@
 import { x4document } from './x4dom'
 import { EvMessage } from './x4events'
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component'
-import { Component } from './component'
+import { Component, flyWrap } from './component'
 import { Settings } from './settings'
-import { deferCall } from './tools'
 import { _tr } from './i18n'
-import { flyWrap } from 'x4js'
 
 const _x4_touch_time = Symbol( );
 

package/src/autocomplete.ts

@@ -0,0 +1,196 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file autocomplete.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 { ListViewItem, PopupListView } from "./listview";
+import { TextEdit, TextEditProps } from './textedit';
+
+/**
+ * 
+ */
+
+interface EditSugProps extends TextEditProps {
+	enumValues: ( filter: string ) => string[];
+}
+
+/**
+ * 
+ */
+
+export class EditSug extends TextEdit<EditSugProps> {
+	
+	private m_popup: PopupListView;
+	private m_popvis: boolean;
+	private m_needval: boolean;
+	private m_lockpop: boolean;
+	
+	constructor( props: EditSugProps ) {
+		super( props );
+
+		this.setDomEvent( "input", ( ) => this._onChange( ) );
+		this.setDomEvent( "focusin", ( ) => this._onFocus( ) );
+		this.startTimer( "focus-check", 100, true, () => this._checkFocus() );
+
+		this.m_popvis = false;
+		this.m_needval = false;
+		this.m_lockpop = false;
+
+		this.setDomEvent( "keydown", e => this._onKey(e) );
+	}
+
+	_onKey( e: KeyboardEvent ) {
+		if( this.m_popvis ) {
+			if( e.key=="ArrowUp" || e.key=="ArrowDown" ) {
+				this.m_lockpop = true;
+				this.m_popup.handleKey( e );
+				this.m_lockpop = false;
+
+				e.preventDefault( );
+				e.stopPropagation( );
+			}
+			else if( e.key=="Escape" ) {
+				this._hidePopup( );
+
+				e.preventDefault( );
+				e.stopPropagation( );
+			}
+		}
+		else if( e.key=="ArrowDown" ) {
+			this._onChange( );
+			e.preventDefault( );
+			e.stopPropagation( );
+		}
+	}
+
+	private _onChange( ) {
+		const items = this.m_props.enumValues( this.value );
+		this.showPopup( items );
+	}
+
+	componentDisposed( ) {
+		if( this.m_popup ) {
+			this._hidePopup( );
+		}
+
+		super.componentDisposed( );
+	}
+
+	/** 
+	 * display the popup 
+	 */
+
+	showPopup( items: string[] ) {
+
+		let props = this.m_props;
+		if (props.readOnly || this.hasClass("@disable") ) {
+			return;
+		}
+
+		// need creation ?
+		
+		if( !this.m_popup ) {
+			let cstyle = this.getComputedStyle( );
+			let fontFamily = cstyle.value( 'fontFamily' );
+			let fontSize = cstyle.value( 'fontSize' );
+
+			// prepare the combo listview
+			this.m_popup = new PopupListView({
+				cls: '@combo-popup',
+				attrs: {
+					tabindex: 0
+				},
+				selectionChange: (e) => {
+					this.value = (e.selection as ListViewItem).id
+					if( !this.m_lockpop ) {
+						this._hidePopup( );
+					}
+				},
+				style: {
+					fontFamily,
+					fontSize
+				}
+			});
+		}
+
+		this.m_popup.items = items.map( c => ({ id: c, text: c }) );
+	
+		let r1 = this.m_ui_input.getBoundingRect();
+		this.m_popup.setStyle({
+			minWidth: r1.width,
+		});
+
+		this.m_popup.displayAt(r1.left, r1.bottom);
+		this.m_popvis = true;
+		
+		//if( this.value!==undefined ) {
+		//	this.m_popup.selection = this.value;
+		//}
+	}
+
+	protected override _validate(value: string): boolean {
+		return true;
+	}
+
+	override validate( ): boolean {
+		return super._validate( this.value );
+	}
+
+	private _checkFocus( ) {
+		const focus = document.activeElement;
+		if( this.dom.contains(focus) ) {
+			return;
+		}
+
+		if( this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus) ) {
+			return;
+		}
+
+		this._hidePopup( );
+	}
+
+	private _hidePopup( ) {
+		
+		if( this.m_popvis ) {
+			this.m_popup.close();
+			this.m_popvis = false;
+		}
+
+		if( this.m_needval ) {
+			this.validate( );
+			this.m_needval = false;
+		}
+	}
+
+	private _onFocus( ) {
+		if( this.value.length==0 ) {
+			this._onChange( );
+		}
+
+		this.m_needval = true;
+	}
+}

package/src/button.ts

@@ -104,6 +104,10 @@ export class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEve
 		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);
 	}
@@ -203,7 +207,7 @@ export class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEve
 		this.m_props.text = text;
 
 		let label = this.itemWithRef<Label>('label');
-		if (label) { label.text = text; }
+		if (label) { label.text = text; label.removeClass("@hidden") }
 	}
 
 	public get text(): string | HtmlString {

package/src/component.ts

@@ -33,7 +33,7 @@
  *		create Container class
  */
 
-import { pascalCase, Rect, isString, isArray, Size, Point, isNumber, asap, HtmlString, isHtmlString, Constructor, getMousePos } from './tools';
+import { pascalCase, Rect, isString, isArray, Size, isNumber, asap, HtmlString, isHtmlString, Constructor, getMousePos } from './tools';
 import { x4document } from './x4dom';
 
 import { Stylesheet, ComputedStyle } from './styles';
@@ -41,7 +41,6 @@ import { _tr } from './i18n';
 import { BasicEvent, EventCallback } from './x4events';
 import { BaseComponent, BaseComponentProps, BaseComponentEventMap } from './base_component';
 import { IDOMEvents, X4ElementEventMap } from './dom_events';
-import { IconID } from 'x4js';
 
 export { HtmlString, isHtmlString, html } from './tools'
 

package/src/form.ts

@@ -59,7 +59,7 @@ export interface FormProps extends CProps<FormEventMap> {
  * 
  */
 
-export class Form extends VLayout<FormProps, FormEventMap>
+export class Form<T extends FormProps = FormProps, E extends FormEventMap = FormEventMap> extends VLayout<T, E>
 {
 	protected m_height: string | number;
 	protected m_container: Container;
@@ -67,7 +67,7 @@ export class Form extends VLayout<FormProps, FormEventMap>
 	protected m_dirty: boolean;
 	protected m_watchChanges: boolean;
 
-	constructor(props: FormProps) {
+	constructor(props: T) {
 
 		let content = props.content;
 		props.content = null;

package/src/gridview.ts

@@ -41,7 +41,7 @@ import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html
 import { Label } from './label'
 import { _tr } from './i18n'
 import * as Formatters from './formatters'
-import { downloadData } from './tools'
+import { downloadData, isFunction } from './tools'
 import { DataView, DataStore, Record } from './datastore'
 
 import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4events";
@@ -134,10 +134,19 @@ class ColHeader extends Component {
 		return this.m_sorted;
 	}
 
-	set sorted( v ) {
+	//set sorted( v ) {
+	//	this.m_sorted = v;
+	//	this.m_sens = 'dn';
+	//	this.itemWithRef<Icon>( 'sorter' ).show( v );
+	//}
+
+	sort( v: boolean, sens: "up" | "dn" ) {
 		this.m_sorted = v;
-		this.m_sens = 'dn';
-		this.itemWithRef<Icon>( 'sorter' ).show( v );
+        this.m_sens = sens;
+
+		const ic = this.itemWithRef<Icon>('sorter');
+        ic.icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+		ic.show(v);
 	}
 
 	get sens( ) {
@@ -146,7 +155,7 @@ class ColHeader extends Component {
 
 	toggleSens( ) {
 		this.m_sens = this.m_sens=='up' ? 'dn' : 'up';
-		this.itemWithRef<Icon>( 'sorter' ).icon = this.m_sens=='dn' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+		this.itemWithRef<Icon>( 'sorter' ).icon = this.m_sens=='up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
 	}
 }
 
@@ -588,7 +597,21 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 	 * 
 	 */
 
-	private _sortCol(col: GridColumn ) {
+	sortCol( name: string, asc = true ) {
+		const col = this.m_columns.find(c => c.id==name );
+		if( col===undefined ) {
+			console.assert( false, "unknown field "+name+" in grid.sortCol" );
+			return;
+		}
+
+		this._sortCol( col, asc ? "dn" : "up" );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _sortCol(col: GridColumn, sens: "up" | "dn" = "up" ) {
 
 		if (col.sortable === false) {
 			return;
@@ -596,7 +619,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 
 		this.m_columns.forEach((c) => {
 			if (c !== col) {
-				(c as GridColumnInternal).$hdr.sorted = false;
+				(c as GridColumnInternal).$hdr.sort( false, "dn" );
 			}
 		});
 
@@ -606,7 +629,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			$hdr.toggleSens( );
 		}
 		else {
-			$hdr.sorted = true;
+			$hdr.sort( true, sens );
 		}
 
 		if (this.m_dataview) {
@@ -1137,17 +1160,24 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			if( cid ) {
 				let col = this.m_columns[cid];
 
-				let fmt = col.formatter;
-				
-				let text;
-				if (fmt && fmt instanceof Function) {
-					text = fmt(rec[col.id], rec);
-				}
-				else {
-					text = rec[col.id];
-				}
+				let value = rec[col.id];
+				if( value!==undefined ) {
+					if( isFunction(value)  ) {	// FooterRenderer
+						value( c );
+					}
+					else {
+						let text;
+						const fmt = col.formatter;
+						if (fmt && fmt instanceof Function) {
+							text = fmt(value, rec);
+						}
+						else {
+							text = value;
+						}
 
-				c.setContent( text, false );
+						c.setContent( text, false );
+					}
+				}
 			}
 		});
 	}

package/src/index.ts

@@ -82,3 +82,5 @@ export * from "./tools"
 export * from "./tooltips"
 export * from "./treeview"
 export * from "./x4events"
+
+export * from "./version"

package/src/listview.ts

@@ -122,7 +122,7 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 	constructor(props: ListViewProps) {
 		super(props);
 
-		this.setDomEvent('keydown', (e) => this._handleKey(e));
+		this.setDomEvent('keydown', (e) => this.handleKey(e));
 		this.setDomEvent('click', (e) => this._handleClick(e));
 		this.setDomEvent('dblclick', (e) => this._handleClick(e));
 		this.setDomEvent('contextmenu', (e) => this._handleCtxMenu(e));
@@ -198,7 +198,7 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 		}
 	}
 
-	private _handleKey(ev: KeyboardEvent) {
+	public handleKey(ev: KeyboardEvent) {
 
 		let moveSel = (sens) => {
 
@@ -237,12 +237,14 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 		switch (ev.key) {
 			case 'ArrowDown': {
 				moveSel(1);
+				ev.preventDefault( );
 				ev.stopPropagation();
 				break;
 			}
 
 			case 'ArrowUp': {
 				moveSel(-1);
+				ev.preventDefault( );
 				ev.stopPropagation();
 				break;
 			}
@@ -705,7 +707,11 @@ export class PopupListView extends Popup<PopupListViewProps,PopupListViewEventMa
 		this.m_list.items = items;
 	}
 
-	// @override
+	public handleKey( ev: KeyboardEvent ) {
+		this.m_list.handleKey( ev );
+	}
+
+
 	// todo: move into popup
 	private _handleClick = (e: MouseEvent) => {
 		if (!this.dom) {

package/src/sidebarview.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { Component, CProps, Flex } from './component'
+import { Component, CProps, Flex, Separator } from './component'
 import { HLayout, VLayout } from './layout'
 import { Button } from './button'
 import { CardView, CardViewProps, ICardViewItem } from './cardview'
@@ -37,13 +37,14 @@ export interface SideBarItem extends ICardViewItem {
 
 export interface SideBarProps extends CardViewProps {
 	bar_sizable?: boolean;
+	bar_width?: number;
 }
 
 /**
  * 
  */
 
-export class SideBarView extends CardView {
+export class SideBarView extends CardView<SideBarProps> {
 	m_sidebar: VLayout;
 	m_content: Component;
 
@@ -55,7 +56,7 @@ export class SideBarView extends CardView {
 
 		this.m_sidebar = new VLayout( {
 			cls: '@side-bar',
-			sizable: props.bar_sizable ? 'right' : undefined,
+			width: props.bar_width ?? undefined,
 		});
 
 		this.m_content = new HLayout( { flex: 1, cls: '@tab-container' } );
@@ -78,6 +79,7 @@ export class SideBarView extends CardView {
 
 		this.setContent( [
 			this.m_sidebar,
+			this.m_props.bar_sizable ? new Separator( { orientation: "horizontal", sizing: "before" }) : undefined,
 			this.m_content
 		] );
 	}

package/src/svgcomponent.ts

@@ -192,9 +192,22 @@ abstract class SVGItem {
 		return result+'"';
 	}
 	
+	/**
+	 * 
+	 */
+
 	renderContent( ): string {
 		return '';
 	}
+
+	/**
+	 * 
+	 */
+
+	clip( id: string ) {
+		this.attr( "clip-path", `url(#${id})` );
+		return this;
+	}
 }
 
 /**
@@ -391,12 +404,13 @@ class SVGGradient extends SVGItem {
  * 
  */
 
-export class SVGPathBuilder 
-{
-	private m_items: SVGItem[];
+class SVGGroup extends SVGItem {
+	protected m_items: SVGItem[];
 
-	constructor( ) {
-		this.m_items = [];
+	constructor( tag = "g" ) {
+		super( tag )
+
+        this.m_items = [];
 	}
 
 	path( ) {
@@ -445,7 +459,7 @@ export class SVGPathBuilder
 		this.m_items = [];
 	}
 
-	render( ) {
+	renderContent( ) {
 		let result: string[] = [];
 		this.m_items.forEach( i => {
 			result.push( i.render() );
@@ -455,6 +469,41 @@ export class SVGPathBuilder
 	}
 }
 
+
+/**
+ * 
+ */
+
+export class SVGPathBuilder extends SVGGroup
+{
+	private static g_clip_id = 1;
+	
+	constructor( ) {
+		super( '' );
+	}
+
+	addClip( x: number, y: number, w: number, h: number ) {
+        
+		const id = 'c-'+SVGPathBuilder.g_clip_id++;
+		const clip = new SVGGroup( 'clipPath' );
+		clip.attr('id', id );
+		clip.rect( x, y, w, h );
+
+		this.m_items.push(clip);
+        return id;
+    }
+    
+    render() {
+
+		let result = [];
+        this.m_items.forEach(i => {
+            result.push(i.render());
+        });
+
+		return result.join('\n');
+     }
+}
+
 /**
  * 
  */

package/src/textedit.ts

@@ -87,13 +87,13 @@ export interface TextEditProps extends InputProps<TextEditEventMap> {
  * TextEdit is a single line editor, it can have a label and an error descriptor.
  */
 
-export class TextEdit<T extends TextEditProps = TextEditProps> extends Component<TextEditProps, TextEditEventMap> {
+export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEditEventMap = TextEditEventMap > extends Component<T, E> {
 
 	private m_cal_popup: PopupCalendar;
 	protected m_ui_input: Input;
 	private m_error_tip: Tooltip;
 
-	constructor(props: TextEditProps) {
+	constructor(props: T) {
 		super(props);
 		this.addClass( '@hlayout' );
 		this.mapPropEvents( props, 'change', 'click', 'focus' );
@@ -410,7 +410,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps> extends Component
 		return this._validate(this.value);
 	}
 
-	private _validate(value: string): boolean {
+	protected _validate(value: string): boolean {
 		let props = this.m_props;
 		let update = false;
 

package/src/tools.ts

@@ -496,7 +496,7 @@ export function date_clone(date: Date): Date {
 export function date_calc_weeknum(date: Date): number {
 	const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
 	const pastDaysOfYear = (date.valueOf() - firstDayOfYear.valueOf()) / 86400000;
-	return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+	return Math.floor((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
 }
 
 
@@ -1406,3 +1406,63 @@ function shuffle(str: string, maxlength?: number) {
 
 	return shuffled;
 }
+
+
+
+/**
+ * taken from live-server 
+ * https://github.com/tapio/live-server
+ * @param host 
+ * @param port 
+ */
+ 
+export function installHMR(host = "127.0.0.1", port = "9876", reloadCallback?: Function ) {
+
+	let tm;
+
+	function refreshCSS() {
+
+		document.body.style.visibility = "hidden";
+
+		let sheets = [].slice.call(document.getElementsByTagName("link"));
+		let head = document.getElementsByTagName("head")[0];
+		
+		for (let i = 0; i < sheets.length; ++i) {
+			let elem = sheets[i];
+			head.removeChild(elem);
+
+			let rel = elem.rel;
+			if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+				let url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+				elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+			}
+			
+			head.appendChild(elem);
+		}
+
+		if( tm ) { clearTimeout(tm); }
+		tm = setTimeout( () => {
+			document.body.style.visibility = "unset";
+		}, 50 );
+	}
+
+	const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+	const address = `${protocol}${host}:${port}/ws`;	
+	const socket = new WebSocket(address);
+
+	socket.onmessage = function (msg) {
+		if (msg.data == 'reload') {
+			if( reloadCallback ) {
+				reloadCallback( );
+			}
+			else {
+				window.location.reload();
+			}
+		}
+		else if (msg.data == 'refreshcss') {
+			refreshCSS();
+		}
+	};
+
+	console.log('Live reload enabled.');
+}