x4js 1.4.18 → 1.4.22

package/src/icon.ts

@@ -30,7 +30,7 @@
 import { Component, CProps } from './component'
 import { Stylesheet } from './styles'
 import { HtmlString, isString } from './tools';
-import { BasicEvent, EvChange, EventMap, EventSource } from './x4_events';
+import { BasicEvent, EvChange, EventMap, EventSource } from './x4events';
 
 // ============================================================================
 // [ICON]
@@ -100,10 +100,15 @@ class Loader extends EventSource<LoadingEventMap> {
 					const r = await fetch( url );
 					if( r.ok ) {
 						const svg = await r.text();
-						this.svgs.set( url, svg );
-
-						//console.log( 'signal=', url );
-						this.signal( 'loaded', EvLoaded(url,svg) );
+						// check response, must be svg
+						if( !svg.startsWith("<svg") ) {
+							console.error( "svg loading error: ", svg );
+							this.signal( 'loaded', EvLoaded(url,"") );
+						}
+						else {
+							this.svgs.set( url, svg );
+							this.signal( 'loaded', EvLoaded(url,svg) );
+						}
 					}
 				}
 			}
@@ -153,6 +158,7 @@ export class Icon extends Component<IconProps>
 		if (typeof (icon) === 'number') {
 			icon = icon.toString(16);
 			name = icon;
+			console.error( "deprecation error: invalid icon name" );	
 		}
 		else {
 			// var( <var-name> )
@@ -160,7 +166,7 @@ export class Icon extends Component<IconProps>
 			//	in the .css
 			//  --------------------------
 			//	:root {
-			//		--chevron-up: svgpath( "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z" );
+			//		--chevron-up: data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z"/></svg>';
 			//	}
 			//
 			//	var( "--chevron-up" )
@@ -193,15 +199,6 @@ export class Icon extends Component<IconProps>
 				return;
 			}
 
-			//	svgpath( <svg-path> )
-			//	svgpath( "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z" )
-			const reSvg3 = /\s*svgpath\s*\(\s*(.+)\s*\)\s*/gi;
-			let match_pth = reSvg3.exec( icon );
-			if( match_pth ) {
-				const pth  = this._setSVGPath( match_pth[1].trim( ) );
-				return;
-			}
-
 			//	data( <direct> )
 			//	data( "data:image/svg+xml;utf8,<svg...></svg>" )
 
@@ -212,6 +209,8 @@ export class Icon extends Component<IconProps>
 				return;
 			}
 			
+			//	cls( "fas fa-angle-up" )
+			//
 			const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
 			let match_cls = reCls.exec( icon );
 			if( match_cls ) {
@@ -220,6 +219,8 @@ export class Icon extends Component<IconProps>
 				return;
 			}
 			
+			//	url( "www.google.com" )
+			//
 			const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
 			let match_url = reUrl.exec( icon );
 			if( match_url ) {
@@ -234,6 +235,8 @@ export class Icon extends Component<IconProps>
 			}
 			else {
 				// todo: deprecated
+				console.error( "deprecation error: invalid icon name" );	
+
 				name = icon;
 				icon = Stylesheet.getVar( 'icon-'+icon ) as string;
 
@@ -241,7 +244,6 @@ export class Icon extends Component<IconProps>
 					// name your icon 'icon-xxx'
 					// ex:
 					// :root { --icon-zoom-p: f00e; }
-					console.assert( false );	
 					icon = '0'; 
 				}
 			}

package/src/image.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Component, CProps, html } from './component'
 
 // ============================================================================
@@ -167,7 +169,7 @@ export class Image extends Component<ImageProps>
 				src = el.src;
 				
 			// skip deleted elements
-			if( !dom || !document.contains(dom) ) {
+			if( !dom || dom.offsetParent === null ) {
 				// do not append to newList
 				return;
 			}
@@ -177,8 +179,8 @@ export class Image extends Component<ImageProps>
 			// if it is visible & inserted inside the document
 			if( !done && dom.offsetParent!==null && 
 				rc.bottom >= 0 && rc.right >= 0 &&  
-				rc.top <= (window.innerHeight || document.documentElement.clientHeight) && 
-				rc.left <= (window.innerWidth || document.documentElement.clientWidth) ) {
+				rc.top <= (window.innerHeight || x4document.documentElement.clientHeight) && 
+				rc.left <= (window.innerWidth || x4document.documentElement.clientWidth) ) {
 
 				// ok, we load the image
 				let img = <HTMLElement>dom.firstChild;

package/src/index.ts

@@ -81,4 +81,4 @@ export * from "./toaster"
 export * from "./tools"
 export * from "./tooltips"
 export * from "./treeview"
-export * from "./x4_events"
+export * from "./x4events"

package/src/input.ts

@@ -84,7 +84,7 @@ export class Input extends Component<InputProps,InputEventMap>
 			autofocus: props.autoFocus,
 			readonly: props.readOnly,
 			autocomplete: 'new-password',	// chrome ignore 'off' but not something else than 'on'
-			tabindex: props.tabIndex,
+			tabIndex: props.tabIndex,
 			spellcheck: props.spellcheck===false ? 'false' : undefined,
 			min: props.min,
 			max: props.max,

package/src/layout.ts

@@ -28,7 +28,7 @@
 */
 
 import { Component, CProps, ComponentContent, Container, ContainerProps, ContainerEventMap } from './component'
-import { } from './x4_events'
+import { } from './x4events'
 import { isArray } from './tools';
 
 // ============================================================================

package/src/link.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps, CEventMap, isHtmlString, HtmlString, html } from './component'
-import { EvClick, EventCallback } from './x4_events'
+import { EvClick, EventCallback } from './x4events'
 
 // ============================================================================
 // [LINK]

package/src/listview.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Container, Component, ContainerProps, ContainerEventMap, EvDblClick } from './component'
 import { IconID } from './icon';
 import { HLayout, VLayout } from './layout'
@@ -34,7 +36,7 @@ import { Popup, PopupEventMap, PopupProps } from './popup';
 import { HtmlString, isFunction } from './tools';
 import { Menu, MenuItem } from "./menu";
 
-import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent, EvChange } from "./x4_events";
+import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent, EvChange } from "./x4events";
 
 /**
  * item definition
@@ -728,18 +730,18 @@ export class PopupListView extends Popup<PopupListViewProps,PopupListViewEventMa
 
 	// todo: move into popup
 	show(modal?: boolean) {
-		document.addEventListener('mousedown', this._handleClick);
+		x4document.addEventListener('mousedown', this._handleClick);
 		super.show(modal);
 	}
 
 	hide( ) {
-		document.removeEventListener('mousedown', this._handleClick);
+		x4document.removeEventListener('mousedown', this._handleClick);
 		super.hide( );
 	}
 
 	// todo: move into popup
 	close() {
-		document.removeEventListener('mousedown', this._handleClick);
+		x4document.removeEventListener('mousedown', this._handleClick);
 		super.close();
 	}
 

package/src/menu.ts

@@ -27,8 +27,10 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { CEventMap, Component, CProps } from './component'
-import { EvClick, EventCallback } from './x4_events'
+import { EvClick, EventCallback } from './x4events'
 
 import { Popup, PopupProps } from './popup'
 import { Icon, IconID } from './icon'
@@ -155,7 +157,7 @@ export class Menu extends Popup<MenuProps>
 		//console.log( 'addmenu' );
 		if (Menu.watchCount == 0) {
 			Menu.rootMenu = menu;
-			document.addEventListener('mousedown', Menu._mouseWatcher);
+			x4document.addEventListener('mousedown', Menu._mouseWatcher);
 		}
 
 		Menu.watchCount++;
@@ -167,7 +169,7 @@ export class Menu extends Popup<MenuProps>
 		Menu.watchCount--;
 
 		if (Menu.watchCount == 0) {
-			document.removeEventListener('mousedown', Menu._mouseWatcher);
+			x4document.removeEventListener('mousedown', Menu._mouseWatcher);
 		}
 	}
 

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/settings.ts

@@ -27,8 +27,6 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { host } from './hosts/host';
-
 export class Settings {
 
 	private m_data: any;
@@ -52,7 +50,7 @@ export class Settings {
 
 	private _save( ) {
 		let data = JSON.stringify(this.m_data);
-		host.writeLocalStorage( this.m_name, data );
+		localStorage.write( this.m_name, data );
 	}
 
 	private _load( ) {
@@ -62,7 +60,7 @@ export class Settings {
 
 		this.m_data = {};
 
-		let data = host.readLocalStorage( this.m_name );
+		let data = localStorage.read( this.m_name );
 		if( data!==null ) {
 			data = JSON.parse( data );
 			if( data ) {

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();
 			}