x4js 1.4.16 → 1.4.20

package/src/application.ts

@@ -27,13 +27,16 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { EvMessage } from './x4_events'
+import { x4document } from './x4dom'
+import { EvMessage } from './x4events'
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component'
 import { Component } from './component'
 import { Settings } from './settings'
 import { deferCall } from './tools'
 import { _tr } from './i18n'
 
+const _x4_touch_time = Symbol( );
+
 
 interface ApplicationEventMap extends BaseComponentEventMap {
 	message: EvMessage;
@@ -92,6 +95,9 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	
 	private m_local_storage: Settings;
 	private m_user_data: any;
+
+	private m_touch_time: number;
+	private m_touch_count: number;
 	
 	constructor( props : P ) {
 		console.assert( Application.self===null, 'application is a singleton' );
@@ -104,6 +110,9 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 		let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
 		this.m_local_storage = new Settings( settings_name );
 		this.m_user_data = {};
+
+		this.m_touch_time = 0;
+		this.m_touch_count = 0;
 	
 		(Application.self as any) = this;
 
@@ -165,7 +174,7 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 		this.mainView.addClass( 'x4-root-element' );
 
 		deferCall( ( ) => {
-			const dest = this.m_props.renderTo ?? document.body;
+			const dest = this.m_props.renderTo ?? x4document.body;
 			while (dest.firstChild) {
 				dest.removeChild(dest.firstChild);
 			}
@@ -178,7 +187,7 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	}
 
 	public setTitle( title: string ) {
-		document.title = this.m_app_name + ' > ' + title;
+		x4document.title = this.m_app_name + ' > ' + title;
 	}
 
 	public disableZoomWheel( ) {
@@ -195,37 +204,31 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	public enterModal( enter: boolean ) {
 	}
 
-	public handleTouchEvents( ) {
-		document.addEventListener( 'touchstart', ( ev: TouchEvent ) => {
+	public enableTouchDblClick( ) {
+		x4document.addEventListener( 'touchstart', ( ev: TouchEvent ) => {
 
-			let me = this as any;
-			let now = new Date( ).getTime();
-
-			if( !me.__last_touch || (me.__last_touch-now) > 700 ) {
-				me.__touch_cnt = 1;
+			let now = Date.now( );
+			if( (now-this.m_touch_time) > 700 ) {
+				this.m_touch_count = 1;
 			}
 			else {
-				me.__touch_cnt++;
+				this.m_touch_count++;
 			}
 
-			me.__last_touch = now;
+			this.m_touch_time = now;
 
-			if( me.__touch_cnt==2 ) {
-				me.__touch_cnt = 0;
-				
-				let fake = {
-					type: "dblclick", 
-				};
+			if( this.m_touch_count==2 ) {
+				this.m_touch_count = 0;
 
+				// dirty fake dblclick event
 				const tch = ev.touches[0];
+				let fake: any = {type: "dblclick" };
 				for( const n in tch ) {
 					fake[n] = tch[n];
 				}
 
-				// ts-ignore -> private
+				// ignore -> private: dirty x2
 				(Component as any)._dispatchEvent( fake );
-
-				ev.preventDefault( );
 				ev.stopPropagation( );
 			}
 		});

package/src/base_component.ts

@@ -28,7 +28,7 @@
 *
 **/
 
-import { EventMap, MapEvents, EventSource, EvTimer } from './x4_events';
+import { EventMap, MapEvents, EventSource, EvTimer } from './x4events';
 
 /**
  * Timer Callback

package/src/button.ts

@@ -29,7 +29,7 @@
 
 
 import { Component, CProps, CEventMap, HtmlString } from './component'
-import { EventCallback, EvClick, EvChange } from './x4_events'
+import { EventCallback, EvClick, EvChange } from './x4events'
 
 import { Icon, IconID } from './icon'
 import { Label } from './label'

package/src/calendar.ts

@@ -27,10 +27,12 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Button } from './button';
 import { Popup } from './popup';
 import { Component, CProps, ContainerEventMap, Flex } from './component'
-import { EvChange, EventCallback } from './x4_events'
+import { EvChange, EventCallback } from './x4events'
 
 import { _tr } from './i18n';
 import { Label } from './label';
@@ -307,13 +309,13 @@ export class PopupCalendar extends Popup {
 
 	/** @ignore */
 	show(modal?: boolean) {
-		document.addEventListener('mousedown', this._handleClick);
+		x4document.addEventListener('mousedown', this._handleClick);
 		super.show(modal);
 	}
 
 	/** @ignore */
 	close() {
-		document.removeEventListener('mousedown', this._handleClick);
+		x4document.removeEventListener('mousedown', this._handleClick);
 		super.close();
 	}
 

package/src/canvas.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps, CEventMap, html } from './component'
-import { BasicEvent, EventCallback } from './x4_events'
+import { BasicEvent, EventCallback } from './x4events'
 
 interface EvPaint extends BasicEvent {
 	ctx: CanvasPainter;

package/src/cardview.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps, CEventMap } from './component'
-import { EvChange } from './x4_events'
+import { EvChange } from './x4events'
 
 import { IconID } from './icon'
 import { asap, isFunction } from './tools'

package/src/checkbox.ts

@@ -28,7 +28,7 @@
 **/
 
 import { CEventMap, Component, CProps } from './component'
-import { EvChange, EventCallback } from './x4_events'
+import { EvChange, EventCallback } from './x4events'
 import { HtmlString } from './tools'
 
 import { Input } from './input'

package/src/colorpicker.ts

@@ -35,7 +35,7 @@
 import { Container, Component, ContainerProps, ContainerEventMap } from './component'
 import { CheckBox } from './checkbox'
 import { Dialog, DialogBoxEventMap, DialogProps } from './dialog'
-import { EvChange, EventCallback } from './x4_events'
+import { EvChange, EventCallback } from './x4events'
 import { VLayout, HLayout } from './layout'
 import { Label } from './label'
 import { Color } from './color'

package/src/combobox.ts

@@ -32,7 +32,7 @@
  */
 
 import { Component, CProps, ContainerEventMap } from './component'
-import { EvChange, EvSelectionChange, EventCallback } from './x4_events'
+import { EvChange, EvSelectionChange, EventCallback } from './x4events'
 
 import { Input } from './input'
 import { Label } from './label'

package/src/component.ts

@@ -34,9 +34,11 @@
  */
 
 import { pascalCase, Rect, isString, isArray, Size, Point, isNumber, asap, HtmlString, isHtmlString, Constructor, getMousePos } from './tools';
+import { x4document } from './x4dom';
+
 import { Stylesheet, ComputedStyle } from './styles';
 import { _tr } from './i18n';
-import { BasicEvent, EventCallback } from './x4_events';
+import { BasicEvent, EventCallback } from './x4events';
 import { BaseComponent, BaseComponentProps, BaseComponentEventMap } from './base_component';
 import { IDOMEvents, X4ElementEventMap } from './dom_events';
 
@@ -725,21 +727,12 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		}
 	}
 
-	///@deprecated
-	//private build(): void  {}
-	/**
-	 * @deprecated
-	 */
-	
-	private Build(): void { }
-
 	public _build(): HTMLElement {
 		if (this.m_dom) {
 			return this.m_dom;
 		}
 
 		this._createDOM();
-
 		return this.m_dom;
 	}
 
@@ -800,10 +793,10 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		let vdom = this.m_iprops;
 
 		if (props.ns) {
-			this.m_dom = <HTMLElement>document.createElementNS(props.ns, props.tag ?? 'div');
+			this.m_dom = <HTMLElement>x4document.createElementNS(props.ns, props.tag ?? 'div');
 		}
 		else {
-			this.m_dom = document.createElement(props.tag ?? 'div');
+			this.m_dom = x4document.createElement( (props.tag ?? 'div') as any );
 		}
 
 		this.m_dom[_x4_el_sym] = this;
@@ -880,7 +873,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		// wait for dom insertion inside document.body
 		if (!Component.__createObserver) {
 			Component.__createObserver = new MutationObserver(Component._observeCreation);
-			Component.__createObserver.observe(document.body, { childList: true, subtree: true });
+			Component.__createObserver.observe(x4document.body, { childList: true, subtree: true });
 		}
 
 		return this.m_dom;
@@ -1190,10 +1183,10 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			Component.__privateEvents[name] = true; // todo count it
 
 			if (passiveEvents[name]) {
-				document.addEventListener(name, Component._dispatchEvent, { passive: false, capture: true });
+				x4document.addEventListener(name as any, Component._dispatchEvent, { passive: false, capture: true });
 			}
 			else {
-				document.addEventListener(name, Component._dispatchEvent, true);
+				x4document.addEventListener(name as any, Component._dispatchEvent, true);
 			}
 		}
 
@@ -1415,8 +1408,8 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 	 * 
 	 */
 
-	private static dispatchCaptures(event: UIEvent) {
-		Component.__capture.handler(event);
+	private static dispatchCaptures(event: Event) {
+		Component.__capture.handler(event as UIEvent);
 	}
 
 	/**
@@ -1447,12 +1440,12 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 
 		//	todo: review that
 
-		let iframes = document.querySelectorAll("iframe");
+		let iframes = x4document.querySelectorAll<HTMLIFrameElement>("iframe");
 		iframes.forEach( f => {
 			flyWrap(f).setStyleValue( 'pointer-events', 'none' );
 		});
 
-		let overs = document.querySelectorAll(":hover");
+		let overs = x4document.querySelectorAll(":hover");
 
 		let cursor = null;
 		if (overs.length) {
@@ -1461,7 +1454,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			cursor = style.cursor;
 		}
 
-		Component.__capture_mask = document.createElement('div');
+		Component.__capture_mask = x4document.createElement('div');
 		let mask = flyWrap(Component.__capture_mask);
 		mask.addClass('@capture-mask');
 
@@ -1469,15 +1462,15 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			mask.setStyleValue('cursor', cursor);
 		}
 
-		document.body.appendChild(mask.dom);
+		x4document.body.appendChild(mask.dom);
 
-		document.addEventListener('mousedown', Component.dispatchCaptures);
-		document.addEventListener('mousemove', Component.dispatchCaptures);
-		document.addEventListener('mouseup', Component.dispatchCaptures);
+		x4document.addEventListener('mousedown', Component.dispatchCaptures);
+		x4document.addEventListener('mousemove', Component.dispatchCaptures);
+		x4document.addEventListener('mouseup', Component.dispatchCaptures);
 
-		document.addEventListener('touchstart', Component.dispatchCaptures);
-		document.addEventListener('touchmove', Component.dispatchCaptures);
-		document.addEventListener('touchend', Component.dispatchCaptures);
+		x4document.addEventListener('touchstart', Component.dispatchCaptures);
+		x4document.addEventListener('touchmove', Component.dispatchCaptures);
+		x4document.addEventListener('touchend', Component.dispatchCaptures);
 
 		Component.__capture = {
 			initiator,
@@ -1490,13 +1483,13 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 
 		console.assert(!!Component.__capture);
 
-		document.removeEventListener('touchstart', Component.dispatchCaptures);
-		document.removeEventListener('touchmove', Component.dispatchCaptures);
-		document.removeEventListener('touchend', Component.dispatchCaptures);
+		x4document.removeEventListener('touchstart', Component.dispatchCaptures);
+		x4document.removeEventListener('touchmove', Component.dispatchCaptures);
+		x4document.removeEventListener('touchend', Component.dispatchCaptures);
 
-		document.removeEventListener('mousedown', Component.dispatchCaptures);
-		document.removeEventListener('mousemove', Component.dispatchCaptures);
-		document.removeEventListener('mouseup', Component.dispatchCaptures);
+		x4document.removeEventListener('mousedown', Component.dispatchCaptures);
+		x4document.removeEventListener('mousemove', Component.dispatchCaptures);
+		x4document.removeEventListener('mouseup', Component.dispatchCaptures);
 		
 		Component.__capture.iframes.forEach( f => {
 			flyWrap(f).setStyleValue( 'pointer-events', null );
@@ -1504,7 +1497,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 
 		Component.__capture = null;
 		if (Component.__capture_mask) {
-			document.body.removeChild(Component.__capture_mask);
+			x4document.body.removeChild(Component.__capture_mask);
 			Component.__capture_mask = null;
 		}
 	}
@@ -1525,7 +1518,9 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			let right = undefined;
 
 			let pn = this.dom.parentElement;
-			while( pn && pn!=document.body ) {
+			const bdy = x4document.body;
+
+			while( pn && pn!=bdy ) {
 
 				const pr = pn.getBoundingClientRect( );
 
@@ -1696,18 +1691,18 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 	static getScrollbarSize() {
 
 		if (Component.__sb_width === undefined) {
-			let outerDiv = document.createElement('div');
+			let outerDiv = x4document.createElement('div');
 			outerDiv.style.cssText = 'overflow:auto;position:absolute;top:0;width:100px;height:100px';
 
-			let innerDiv = document.createElement('div');
+			let innerDiv = x4document.createElement('div');
 			innerDiv.style.width = '200px';
 			innerDiv.style.height = '200px';
 
 			outerDiv.appendChild(innerDiv);
-			document.body.appendChild(outerDiv);
+			x4document.body.appendChild(outerDiv);
 
 			Component.__sb_width = outerDiv.offsetWidth - outerDiv.clientWidth;
-			document.body.removeChild(outerDiv);
+			x4document.body.removeChild(outerDiv);
 		}
 
 		return Component.__sb_width;

package/src/datastore.ts

@@ -29,7 +29,7 @@
 
 import { ajaxRequest } from './request';
 import { isArray, isString } from './tools';
-import { BasicEvent, EvChange, EventSource, EventMap, MapEvents } from './x4_events';
+import { BasicEvent, EvChange, EventSource, EventMap, MapEvents } from './x4events';
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
 
 export type ChangeCallback = (type: string, id?: any) => void;

package/src/dialog.ts

@@ -27,13 +27,15 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Popup, PopupProps, PopupEventMap, EvMove } from './popup'
 import { Icon, IconID } from './icon'
 import { HLayout } from './layout'
 import { Label } from './label'
 import { Form, FormButtons } from './form'
 import { Component, ComponentContent, EvSize, flyWrap } from './component'
-import { BasicEvent, EventCallback } from './x4_events'
+import { BasicEvent, EventCallback } from './x4events'
 import { Rect, getMousePos, isFunction, isTouchDevice, isString, Size } from './tools'
 
 interface Geometry {
@@ -458,7 +460,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 
 		let { x, y } = getMousePos(event, true);
 
-		let wrc = flyWrap(document.body).getBoundingRect();
+		let wrc = flyWrap(x4document.body).getBoundingRect();
 		let rc = this.getBoundingRect(true);
 		let trc = this.m_el_title.getBoundingRect();
 

package/src/drag_manager.ts

@@ -26,6 +26,9 @@
 * 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'
+
 import { Component } from './component';
 import { Point } from './tools';
 
@@ -61,7 +64,7 @@ class DragManager {
 			this.dragGhost = el.dom.cloneNode(true) as HTMLElement;
 			
 			this.dragGhost.classList.add('dragged');
-			document.body.appendChild(this.dragGhost);
+			x4document.body.appendChild(this.dragGhost);
 
 			el.addClass( 'dragging' );
 

package/src/fileupload.ts

@@ -27,6 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
 import { Component, CProps } from './component'
 
 import { HLayout } from './layout'
@@ -157,7 +158,7 @@ function _createFileInput() {
 		});
 
 		// ajoute un input type:file caché pour pouvoir choir un fichier a ouvrir
-		document.body.appendChild(g_file_input._build());
+		x4document.body.appendChild(g_file_input._build());
 	}
 
 	g_file_input.clearDomEvent('change');

package/src/form.ts

@@ -33,7 +33,7 @@ import { Button } from './button'
 import { Input } from './input'
 import { TextEdit } from './textedit'
 import { ajaxRequest, RequestProps } from './request'
-import { EventCallback } from './x4_events'
+import { EventCallback } from './x4events'
 import { EvBtnClick } from './dialog'
 
 import { _tr } from './i18n'

package/src/gridview.ts

@@ -34,6 +34,7 @@ const T_UPDATE = Symbol('update');
  * todo: button in a column
  */
 
+import { x4document } from './x4dom'
 
 import { HLayout, VLayout } from './layout'
 import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html, HtmlString, SizerOverlay, Flex } from './component'
@@ -43,7 +44,7 @@ import * as Formatters from './formatters'
 import { downloadData } from './tools'
 import { DataView, DataStore, Record } from './datastore'
 
-import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4_events";
+import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4events";
 import { Icon } from './icon.js';
 
 export interface EvGridCheck extends BasicEvent {
@@ -618,10 +619,10 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 	 */
 
 	private _computeItemHeight() {
-		let gr = document.createElement('div');
+		let gr = x4document.createElement('div');
 		gr.classList.add('x-row');
 
-		let gv = document.createElement('div');
+		let gv = x4document.createElement('div');
 		gv.classList.add('x-grid-view');
 		gv.style.position = 'absolute';
 		gv.style.top = '-1000px';

package/src/hosts/electron.ts

@@ -17,11 +17,14 @@
 * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 **/
 
+import { x4document } from '../dom-gen'
 import { FileStat, PathType, PartType, Host } from './host'
 
 export * from './host';
 
+declare const require;
 declare const host_require;
+
 if( !globalThis.host_require ) {
 	globalThis.host_require = require;
 }
@@ -154,7 +157,7 @@ export class ElectronHost extends Host {
 	}
 
 	createCanvas = ( ) => {
-		return document.createElement('canvas');
+		return x4document.createElement('canvas');
 	}
 }