x4js 1.4.17 → 1.4.21

package/src/popup.ts

@@ -27,9 +27,11 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Container, CProps, flyWrap, SizerOverlay, EvOverlayResize, Component, ContainerEventMap, EvSize } from './component'
 import { Point, Size, getMousePos, asap } from './tools'
-import { BasicEvent } from './x4_events';
+import { BasicEvent } from './x4events';
 import { Application } from './application';
 
 
@@ -89,11 +91,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 		if (this.m_hasMask) {
 
 			// remove the focus
-			const focus = document.activeElement as HTMLElement;
+			const focus = x4document.activeElement as HTMLElement;
 			if (focus) {
 				focus.blur()
 			}
-			this.m_ui_mask = <HTMLElement>document.body.lastChild;
+			this.m_ui_mask = <HTMLElement>x4document.body.lastChild;
 
 			while (this.m_ui_mask) {
 
@@ -134,13 +136,13 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 			top: 0
 		});
 
-		document.body.appendChild(this._build());
+		x4document.body.appendChild(this._build());
 
 		this.removeClass('@hidden');
 		this.centerOnScreen( );
 
 		if (modal) {
-			let focus = document.activeElement;
+			let focus = x4document.activeElement;
 			if (!this.dom.contains(focus)) {
 				
 				const autofocus = this.queryItem('[autofocus]');
@@ -167,8 +169,8 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 	centerOnScreen( ) {
 		let rc = this.getBoundingRect();
 
-		let x = (document.body.clientWidth - rc.width) / 2,
-			y = (document.body.clientHeight - rc.height) / 2;
+		let x = (x4document.body.clientWidth - rc.width) / 2,
+			y = (x4document.body.clientHeight - rc.height) / 2;
 
 		this.setStyleValue('left', x);
 		this.setStyleValue('top', y);
@@ -196,7 +198,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 		}
 
 		// @TODO: this is a minimal overflow problem solution
-		let rc = document.body.getBoundingClientRect(),
+		let rc = x4document.body.getBoundingClientRect(),
 			rm = this.getBoundingRect();
 
 		if (halign == 'r') {
@@ -418,7 +420,7 @@ function x4handleKeyDown(e: KeyboardEvent) {
 			return;
 		}
 
-		let topStack = document.body;
+		let topStack = x4document.body;
 		if (Popup.modal_stack.length) {
 			topStack = Popup.modal_stack[Popup.modal_stack.length - 1];
 		}
@@ -436,7 +438,7 @@ function x4handleKeyDown(e: KeyboardEvent) {
 function _nextTab(root: HTMLElement, el: HTMLElement, prev: boolean) {
 
 	// first check if the focus is one of our child (disabled...)
-	let focusEl = document.activeElement;
+	let focusEl = x4document.activeElement;
 	if (!root.contains(focusEl)) {
 		return;
 	}
@@ -482,8 +484,8 @@ function _nextTab(root: HTMLElement, el: HTMLElement, prev: boolean) {
 
 function installKBHandler( ) {
 	// set on body to be called after document (where all component domevent go)
-	document.body.addEventListener('keydown', x4handleKeyDown, true);
+	x4document.body.addEventListener('keydown', x4handleKeyDown, true);
 }
 
 // too early ?
-document.body ? installKBHandler( ) : window.addEventListener( 'load', installKBHandler );
+x4document.body ? installKBHandler( ) : window.addEventListener( 'load', installKBHandler );

package/src/property_editor.ts

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

package/src/radiobtn.ts

@@ -27,8 +27,10 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Component, CProps, CEventMap } from './component'
-import { EvChange, EventCallback } from './x4_events'
+import { EvChange, EventCallback } from './x4events'
 
 import { IconID } from './icon';
 import { Input } from './input'
@@ -131,7 +133,7 @@ export class RadioBtn extends Component<RadioBtnProps,RadioBtnEventMap> {
 		let props = this.m_props;
 
 		let query = '.x-input[name='+props.name+']';
-		let nlist = document.querySelectorAll( query );		//todo: document ?
+		let nlist = x4document.querySelectorAll( query );		//todo: document ?
 
 		nlist.forEach( (dom) => {
 			let radio = Component.getElement( <HTMLElement>dom, RadioBtn );

package/src/rating.ts

@@ -30,7 +30,7 @@
 import { CProps, Component, ContainerEventMap } from './component'
 import { HLayout } from './layout';
 import { Input } from './input'
-import { EvChange, EventCallback } from './x4_events';
+import { EvChange, EventCallback } from './x4events';
 
 interface RatingEventMap extends ContainerEventMap {
 	change: EvChange;

package/src/router.ts

@@ -27,7 +27,9 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { EventSource, EvError, EventMap } from "./x4_events"
+import { x4document } from './x4dom'
+
+import { EventSource, EvError, EventMap } from "./x4events"
 
 type RouteHandler = ( params: any, path: string ) => void;
 
@@ -102,7 +104,7 @@ export class Router extends EventSource< RouterEventMap > {
 		this.routes = [];
 
 		window.addEventListener('popstate', (event) => {
-			const url = document.location.pathname;
+			const url = x4document.location.pathname;
 			const found = this._find(url);
 		
 			found.handlers.forEach(h => {

package/src/smartedit.ts

@@ -27,7 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { InputProps } from './input'
+import { x4document } from './dom-gen'
+
 import { TextEdit, TextEditProps } from './textedit'
 import { DataStore, DataView, Record } from './datastore'
 import { Popup, PopupProps, PopupEventMap } from './popup';
@@ -481,7 +482,7 @@ export class PopupTable extends Popup<PopupTableProps, PopupTableEventMap> {
 		}
 
 		// @TODO: this is a minimal overflow problem solution
-		let rc = document.body.getBoundingClientRect(),
+		let rc = x4document.body.getBoundingClientRect(),
 			rm = this.getBoundingRect();
 
 		if (halign == 'r') {

package/src/spreadsheet.ts

@@ -27,14 +27,16 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { Component, CProps, SizerOverlay, EvDblClick, EvSize, ContainerEventMap, ContainerProps } from './component'
+import { x4document } from './x4dom'
+
+import { Component, SizerOverlay, EvDblClick, EvSize, ContainerEventMap, ContainerProps } from './component'
 import { Input, InputProps } from './input';
 import { HLayout, VLayout } from './layout';
 import { TextEditProps, TextEdit } from './textedit';
 import * as Formatters from './formatters';
 import { asap, parseIntlFloat } from './tools';
 import { deferCall } from './tools';
-import { EvContextMenu, EvChange, EvSelectionChange, EventCallback } from './x4_events'
+import { EvContextMenu, EvChange, EvSelectionChange, EventCallback } from './x4events'
 import { ComboBox } from './combobox';
 
 
@@ -153,7 +155,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 			this.m_row_limit = props.maxrows;
 		}
 
-		this.setAttribute('tabIndex', 0);
+		this.setAttribute('tabindex', 0);
 
 		this.setDomEvent('click', (e) => this._itemClick(e) );
 		this.setDomEvent('dblclick', (e) => this._itemDblClick(e) );
@@ -459,13 +461,13 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 	 */
 
 	private _computeItemHeight() {
-		let g1 = document.createElement('div');
+		let g1 = x4document.createElement('div');
 		g1.classList.add('x-spreadsheet');
 
-		let g2 = document.createElement('div');
+		let g2 = x4document.createElement('div');
 		g2.classList.add('content');
 
-		let g3 = document.createElement('div');
+		let g3 = x4document.createElement('div');
 		g3.classList.add('x-cell');
 		g3.append( '&nbsp;' )
 

package/src/styles.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { pascalCase, isString, isArray } from "./tools";
 
 
@@ -42,8 +44,8 @@ export class Stylesheet {
 	constructor() {
 		
 		function getStyleSheet( name ) : CSSStyleSheet {
-			for(let i=0; i<document.styleSheets.length; i++) {
-			  	let sheet = document.styleSheets[i];
+			for(let i=0; i<x4document.styleSheets.length; i++) {
+			  	let sheet = x4document.styleSheets[i];
 			  	if(sheet.title === name ) {
 					return <CSSStyleSheet>sheet;
 			  	}
@@ -52,9 +54,9 @@ export class Stylesheet {
 
 		this.m_sheet = getStyleSheet( '@dynamic-css' );
 		if( !this.m_sheet ) {
-			let dom = document.createElement( 'style' );
+			let dom = x4document.createElement( 'style' );
 			dom.setAttribute('id', '@dynamic-css' );
-			document.head.appendChild(dom);
+			x4document.head.appendChild(dom);
 
 			this.m_sheet = <CSSStyleSheet>dom.sheet
 		}
@@ -117,7 +119,7 @@ export class Stylesheet {
 
 	public static getVar( name: string ) : any {
 		if( !Stylesheet.doc_style ) {
-			Stylesheet.doc_style = getComputedStyle( document.documentElement );
+			Stylesheet.doc_style = getComputedStyle( x4document.documentElement );
 		}
 
 		if( name[0]!='-' ) {

package/src/svgcomponent.ts

@@ -88,8 +88,11 @@ abstract class SVGItem {
 	 * @param color 
 	 */
 
-	stroke( color: string ): this {
+	stroke( color: string, width?: number ): this {
 		this.attr( 'stroke', color );
+		if( width!==undefined ) {
+			this.attr( 'stroke-width', width+'px' );	
+		}
 		return this;
 	}
 

package/src/tabbar.ts

@@ -29,7 +29,7 @@
 
 import { Component, Container, ContainerEventMap, CProps, EventHandler } from './component';
 import { Button } from './button';
-import { EvChange } from './x4_events';
+import { EvChange } from './x4events';
 import { IconID } from './icon.js';
 
 interface TabBarEventMap extends ContainerEventMap {

package/src/textarea.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps, CEventMap } from './component'
-import { EvChange, EventCallback } from './x4_events'
+import { EvChange, EventCallback } from './x4events'
 import { asap } from './tools'
 
 interface TextAreaEventMap extends CEventMap {

package/src/textedit.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Component, EvFocus, HtmlString } from './component'
 import { Input, InputProps, InputEventMap } from './input'
 import { IconID } from './icon'
@@ -36,7 +38,7 @@ import { Label } from './label'
 import { PopupCalendar } from './calendar'
 import { sprintf, parseIntlDate, formatIntlDate } from './tools';
 import { Tooltip } from './tooltips'
-import { EvClick, EvChange, EventCallback } from './x4_events';
+import { EvClick, EvChange, EventCallback } from './x4events';
 
 import { _tr } from './i18n'
 
@@ -307,7 +309,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps> extends Component
 
 		if (!this.m_error_tip) {
 			this.m_error_tip = new Tooltip({ cls: 'error' });
-			document.body.appendChild(this.m_error_tip._build());
+			x4document.body.appendChild(this.m_error_tip._build());
 		}
 
 		let rc = this.m_ui_input.getBoundingRect();

package/src/tools.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { _tr } from './i18n'; 	// you MUST create a file named translation.js
 
 // :: ENVIRONMENT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -104,6 +106,14 @@ export function pascalCase(string: string): string {
 	return result.replace(/ /g, '-');
 }
 
+export function camelCase( text: string ) {
+	let result = text.toLowerCase( );
+	result = result.replace( /[^a-zA-Z0-9]+(.)/g, (m,chr) => {
+		return chr.toUpperCase();
+	} );
+	return result;
+}
+
 // :: MISC CLASSES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 export type Constructor<T> = new (...args: any[]) => T;
@@ -800,11 +810,11 @@ export function downloadData(data, mimetype: string, filename: string) {
 	let blob = new Blob([data], { type: mimetype });
 	let url = window.URL.createObjectURL(blob);
 
-	let a = document.createElement("a");
+	let a = x4document.createElement("a");
 	a.style['display'] = "none";
 	a.href = url;
 	a.download = filename;
-	document.body.appendChild(a);
+	x4document.body.appendChild(a);
 
 	a.click();
 	window.URL.revokeObjectURL(url);
@@ -894,7 +904,7 @@ export function waitFontLoading(name: string) {
 	// pitfall: if the font is already loaded, ne never end.
 	// @review that
 
-	let ct = document.createElement('div');
+	let ct = x4document.createElement('div');
 
 	ct.style.position = 'absolute';
 	ct.style.fontFamily = name;
@@ -902,7 +912,7 @@ export function waitFontLoading(name: string) {
 	ct.style.opacity = '0.001';
 	ct.innerText = 'X';
 
-	document.body.appendChild(ct);
+	x4document.body.appendChild(ct);
 
 	return new Promise<void>((resolve) => {
 
@@ -912,7 +922,7 @@ export function waitFontLoading(name: string) {
 			let nrc = ct.getBoundingClientRect();
 			if (nrc.height != irc.height) {
 				clearInterval(tm);
-				document.body.removeChild(ct);
+				x4document.body.removeChild(ct);
 
 				resolve();
 			}

package/src/tooltips.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Component } from './component'
 import { Label } from './label'
 import { Icon } from './icon'
@@ -79,7 +81,7 @@ export class Tooltip extends Component {
 		}
 
 		// @TODO: this is a minimal overflow problem solution
-		let rc = document.body.getBoundingClientRect(),
+		let rc = x4document.body.getBoundingClientRect(),
 			rm = this.getBoundingRect();
 
 		if (halign == 'r') {
@@ -163,7 +165,7 @@ export function initTooltips(cb?: TooltipHandler) {
 
 				if (tooltip === undefined) {
 					tooltip = new Tooltip({});
-					document.body.appendChild(tooltip._build());
+					x4document.body.appendChild(tooltip._build());
 				}
 
 				tooltip.text = tip;
@@ -183,7 +185,7 @@ export function initTooltips(cb?: TooltipHandler) {
 		}
 	}
 
-	document.body.addEventListener('mouseover', handle_mouse);
-	document.body.addEventListener('mouseout', handle_mouse);
-	document.body.addEventListener('mousemove', handle_mpos);
+	x4document.body.addEventListener('mouseover', handle_mouse);
+	x4document.body.addEventListener('mouseout', handle_mouse);
+	x4document.body.addEventListener('mousemove', handle_mpos);
 }

package/src/treeview.ts

@@ -32,7 +32,7 @@ import { HtmlString, Rect } from './tools';
 import { Icon, IconID } from './icon';
 import { Label } from './label';
 import { HLayout, VLayout } from './layout';
-import { EvClick, BasicEvent, EvDrag, EvSelectionChange, EvContextMenu } from './x4_events';
+import { EvClick, BasicEvent, EvDrag, EvSelectionChange, EvContextMenu } from './x4events';
 
 export interface EvExpand extends BasicEvent {
 	node: TreeNode;

package/src/x4dom.ts

@@ -0,0 +1,57 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file x4events.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.
+**/
+
+/**
+ * SSR preparation
+ */
+
+interface IX4Document {
+	createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
+	createElementNS(namespace: string | null, qualifiedName: string, options?: string | ElementCreationOptions): Element;
+	createTextNode(data: string): Text;
+
+	addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+	removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+
+	querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+	querySelector<E extends Element = Element>(selectors: string): E | null;
+
+	get body( ) : HTMLElement;
+	get activeElement( ): Element;
+	get location( ): Location;
+	get styleSheets( ): StyleSheetList;
+	get head( ): HTMLHeadElement;
+	get documentElement( ): HTMLElement; 
+
+	set title( title: string );
+}
+
+
+export let x4document: IX4Document = document;
+

package/src/{x4_events.ts → x4events.ts}

@@ -5,7 +5,7 @@
 *   /  _  \____   _|  
 *  /__/ \__\   |_|
 *        
-* @file observable.ts
+* @file x4events.ts
 * @author Etienne Cochard 
 *
 * Copyright (c) 2019-2022 R-libre ingenierie

package/tsconfig.json

@@ -11,5 +11,15 @@
   	},
 	"include": [
 		"./src/*",
-	]
+	],
+	"exclude": [
+		"src/hosts/nwjs_types.ts",
+		"src/hosts/nwjs.ts",
+		"src/texthiliter.ts",
+		"src/smartedit.ts"
+	],
+	"typedocOptions": {
+        "entryPoints": ["src/index.ts"],
+        "out": "../doc/api"
+    }
 }