x4js 2.2.6 → 2.2.8

package/src/components/monaco/monaco.module.scss

@@ -0,0 +1,22 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file monacoeditor.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+ 
+.x4monacoeditor {
+	display: grid;
+	grid-template-rows: 1fr;
+	grid-template-columns: 1fr;
+	overflow: hidden;
+}

package/src/components/monaco/monaco.ts

@@ -0,0 +1,111 @@
+import { class_ns, Component, ComponentProps } from '../../x4.js';
+
+import Monaco from './bin/monaco'; 
+import "./monaco.module.scss"
+
+
+interface MonacoEditorProps extends ComponentProps {
+	language: "typescript" | "javascript" | "json" | "css" | "html";
+	theme?: string;
+	content?: string;
+	options?: Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions;
+}
+
+@class_ns( "x4" )
+export class MonacoEditor extends Component<MonacoEditorProps> {
+
+	static initCount = 0;
+	static basePath: string = "./bin";
+	static monaco: typeof Monaco;
+	static initCbs: Function[] = [];
+
+	private _editor: Monaco.editor.IStandaloneCodeEditor;
+
+	static async start( ) { 
+		if( this.initCount ) {
+			return;
+		}
+
+		this.monaco = (await import( "./bin/monaco.js" )).default;
+		this.initCount++;
+
+		globalThis.MonacoEnvironment = {
+			getWorkerUrl: function (_moduleId, label) {
+				let workerPath: string;
+
+				if (label == 'json') {
+					workerPath = 'json.worker.js';
+				}
+				else if (label == 'css' || label == 'scss' || label == 'less') {
+					workerPath = 'css.worker.js';
+				}
+				else if (label == 'html' ) {
+					workerPath = 'html.worker.js';
+				}
+				else if (label === 'typescript' || label === 'javascript') {
+					workerPath = 'ts.worker.js';
+				}
+				else {
+					workerPath = "editor.worker.js";
+				}
+
+				const fullpath = MonacoEditor.basePath+'/workers/'+workerPath;
+				console.log( `getting "${label} path: ${fullpath}` );
+				return fullpath;
+			}
+		};
+
+		const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = MonacoEditor.basePath+'/monaco.css';
+        link.type = 'text/css';
+        document.head.appendChild(link);
+	}
+
+	static addTypelib( name: string, code: string ) {
+		const register = ( ) => {
+			///@ts-ignore
+			const ts = MonacoEditor.monaco.languages.typescript;
+			///@ts-ignore
+			ts.typescriptDefaults.addExtraLib( code, `ts:filename/${name}`);
+		}
+
+		if( MonacoEditor.monaco ) {
+			register( );
+		}
+		else {
+			this.initCbs.push( register );
+		}
+	}
+
+	constructor( props: MonacoEditorProps ) {
+		const content = props.content;
+		delete props.content;
+
+		super( props );
+
+		MonacoEditor.start( )
+			.then( ( ) => {
+				MonacoEditor.initCbs.forEach( x => x() );
+
+				this._editor = MonacoEditor.monaco.editor.create( this.dom as HTMLElement, {
+					value: content,
+					language: props.language,
+					theme: props.theme,
+					//automaticLayout: true,
+				});
+
+				if( props.options ) {
+					this._editor.updateOptions( props.options );
+				}
+			} );
+
+		this.addDOMEvent( "resized", ( ) => {
+			//const rc = this.getBoundingRect( );
+			if( this._editor ) {
+				this._editor.layout();
+			}
+		})
+	}
+}
+

package/src/components/monaco/readme.md

@@ -0,0 +1,3 @@
+# using monaco in x4
+
+you must copy ./bin/* in your destination folder

package/src/components/monaco/sources/build.js

@@ -0,0 +1,41 @@
+import * as esbuild from 'esbuild';
+
+const MONACO_DIR = 'node_modules/monaco-editor/esm/vs';
+
+const commonConfig = {
+	bundle: true,
+	minify: true,
+	format: 'esm',
+	target: 'es2022',
+	logLevel: 'info',
+};
+
+async function build() {
+	// 1. Build des Workers (obligatoires pour la coloration/validation)
+	// On génère uniquement les workers dont on a besoin
+	await esbuild.build({
+		...commonConfig,
+		entryPoints: {
+			'editor.worker': 	`${MONACO_DIR}/editor/editor.worker.js`,
+			'ts.worker': 		`${MONACO_DIR}/language/typescript/ts.worker.js`,
+			'css.worker': 		`${MONACO_DIR}/language/css/css.worker.js`,
+			'html.worker': 		`${MONACO_DIR}/language/html/html.worker.js`,
+			'json.worker': 		`${MONACO_DIR}/language/json/json.worker.js`,
+		},
+		outdir: 'dist/workers',
+	});
+
+	// 2. Build de l'application principale
+	await esbuild.build({
+		...commonConfig,
+		entryPoints: ['index.ts'],
+		outfile: 'dist/monaco.js',
+		globalName: 'monaco',
+		loader: {
+			'.ttf': 'file',
+			'.css': 'css',
+		},
+	});
+}
+
+build();

package/src/components/monaco/sources/demo.js

@@ -0,0 +1,57 @@
+import monaco from './dist/monaco.js';
+
+const myLibCode = `
+    declare namespace MyAPI {
+        /**
+         * Calcule une performance optimale.
+         * @param value Le coefficient d'entrée.
+         */
+        function compute(value: number): string;
+    }
+`;
+
+const myLibUri = 'ts:filename/myapi.d.ts';
+
+const ts = (monaco.languages).typescript;
+ts.typescriptDefaults.addExtraLib(myLibCode, myLibUri);
+
+// Facultatif : Créer un modèle pour que l'éditeur "voie" le fichier
+// Utile si tu veux que le "Go to Definition" fonctionne vers ce fichier
+monaco.editor.createModel(myLibCode, 'typescript', monaco.Uri.parse(myLibUri));
+
+
+const el = document.getElementById("container");
+
+globalThis.MonacoEnvironment = {
+	getWorkerUrl: function (_moduleId, label) {
+		if (label === 'json') return './dist/workers/json.worker.js';
+		if (label === 'css' || label === 'scss' || label === 'less') return './dist/workers/css.worker.js';
+		if (label === 'html') return './dist/workers/html.worker.js';
+		if (label === 'typescript' || label === 'javascript') return './dist/workers/ts.worker.js';
+		return './dist/workers/editor.worker.js';
+	}
+};
+
+monaco.languages["typescript"].typescriptDefaults.setCompilerOptions({
+	target: monaco.languages.typescript.ScriptTarget.ESNext,
+	allowNonTsExtensions: true,
+	moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+	module: monaco.languages.typescript.ModuleKind.CommonJS,
+	noEmit: true,
+	typeRoots: ["node_modules/@types"]
+});
+
+monaco.editor.create(el, {
+	value: `
+function test( ) {
+	for( let i=0; i<1000; i++ ) {
+		console.log( "i", i );
+	}
+}
+
+test( );
+			`,
+	language: 'typescript',
+	theme: 'vs-dark'
+});
+

package/src/components/monaco/sources/editor.worker.ts

@@ -0,0 +1 @@
+import 'monaco-editor/esm/vs/editor/editor.worker.js';

package/src/components/monaco/sources/index.ts

@@ -0,0 +1,7 @@
+import * as monaco from 'monaco-editor';
+
+import 'monaco-editor/esm/vs/language/html/monaco.contribution.js';
+import 'monaco-editor/esm/vs/language/css/monaco.contribution.js';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
+
+export default monaco;

package/src/components/monaco/sources/package.json

@@ -0,0 +1,7 @@
+{
+	"type": "module",
+  	"dependencies": {
+	    "esbuild": "^0.27.4",
+	    "monaco-editor": "^0.55.1"
+  	}
+}

package/src/components/monaco/sources/test.html

@@ -0,0 +1,9 @@
+<html>
+<link rel="stylesheet" href="./dist/monaco.css">
+<script type="module" src="demo.js"></script>
+
+<body>
+	<div style="width:500px; height: 500px; border: 1px solid red;" id="container"></div>
+</body>
+
+</html>

package/src/components/monaco/sources/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
+		"target": "ESNext",
+		"module": "ESNext",
+		"baseUrl": ".",
+		"paths": {
+			"monaco-editor/*": [
+				"node_modules/monaco-editor/*"
+			]
+		},
+	    "esModuleInterop": true,
+    	"skipLibCheck": true
+	}
+}

package/src/components/normalize.scss

@@ -8,7 +8,7 @@
  * @file normalize.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/notification/notification.module.scss

@@ -8,7 +8,7 @@
  * @file notification.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/notification/notification.ts

@@ -8,7 +8,7 @@
  * @file notification.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/panel/panel.module.scss

@@ -8,7 +8,7 @@
  * @file panel.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/panel/panel.ts

@@ -8,7 +8,7 @@
  * @file panel.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/popup/popup.module.scss

@@ -8,7 +8,7 @@
  * @file popup.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/popup/popup.ts

@@ -8,7 +8,7 @@
  * @file popup.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/progress/progress.module.scss

@@ -8,7 +8,7 @@
  * @file progress.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/progress/progress.ts

@@ -8,7 +8,7 @@
  * @file progress.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/propgrid/propgrid.ts

@@ -8,7 +8,7 @@
  * @file propgrid.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/radio/radio.module.scss

@@ -8,7 +8,7 @@
  * @file radio.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/radio/radio.ts

@@ -8,7 +8,7 @@
  * @file radio.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/rating/rating.ts

@@ -8,7 +8,7 @@
  * @file rating.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/shared.scss

@@ -8,7 +8,7 @@
  * @file shared.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/sizers/sizer.module.scss

@@ -8,7 +8,7 @@
  * @file sizer.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
@@ -26,8 +26,10 @@
 		cursor: ns-resize;
 	}
 
-	&.vsize,
-	&.hsize {
+	&.vsize-next,
+	&.vsize-prev,
+	&.hsize-next,
+	&.hsize-prev {
 		position: relative;
 		align-self: stretch;
 		min-width: 4px;
@@ -38,11 +40,13 @@
 		}
 	}
 
-	&.hsize {
+	&.hsize-next,
+	&.hsize-prev {
 		cursor: ew-resize;		
 	}
 
-	&.vsize {
+	&.vsize-next,
+	&.vsize-prev {
 		cursor: ns-resize;
 	}
 

package/src/components/sizers/sizer.ts

@@ -8,7 +8,7 @@
  * @file sizer.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
@@ -33,7 +33,8 @@ interface CSizerEvent extends ComponentEvents {
 	stop: ComponentEvent;
 }
 
-type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "hsize" | "vsize";
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" 
+					| "hsize-prev" | "hsize-next" | "vsize-prev" | "vsize-next";
 
 /**
  * 
@@ -57,8 +58,13 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this.setCapture( e.pointerId );
 
 			let targ = target;
-			if( !targ && (type=='hsize' || type=='vsize') ) {
-				targ = this.nextElement( );
+			if( !targ ) {
+				if( type=='hsize-next' || type=='vsize-next' ) {
+					targ = this.nextElement( );
+				}
+				else if( type=='hsize-prev' || type=='vsize-prev' ) {
+					targ = this.prevElement( );
+				}
 			}
 
 			this._ref = targ ?? componentFromDOM( this.dom.parentElement );
@@ -66,14 +72,14 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this._delta = {x:0,y:0};
 			const rc = this._ref.getBoundingRect();
 
-			if( this._type=="hsize" || this._type.includes("left") ) {
+			if( this._type=="hsize-next" || this._type.includes("left") ) {
 				this._delta.x = e.pageX-rc.left;
 			}
 			else {
 				this._delta.x = e.pageX-(rc.left+rc.width);
 			}
 
-			if( this._type=="vsize" || this._type.includes("top") ) {
+			if( this._type=="vsize-next" || this._type.includes("top") ) {
 				this._delta.y = e.pageY-rc.top;
 			}
 			else {
@@ -110,11 +116,11 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type=="vsize" ) {
+		else if( this._type=="vsize-next" ) {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type.includes("bottom") ) {
+		else if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
 			//nr.top = rc.top;
 			nr.height = (pt.y-rc.top);
 			horz = false;
@@ -123,10 +129,10 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			nr.left = pt.x;
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type=="hsize" ) {
+		else if( this._type=="hsize-next" ) {
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type.includes("right") ) {
+		else if( this._type.includes("right") || this._type=='hsize-prev' ) {
 			nr.width = (pt.x-rc.left);
 		}
 
@@ -143,14 +149,14 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
 @class_ns( "x4" )
 export class HSizer extends CSizer {
-	constructor( ) {
-		super( "hsize" );
+	constructor( next = true ) {
+		super( next ? "hsize-next" : "hsize-prev" );
 	}
 }
 
 @class_ns( "x4" )
 export class VSizer extends CSizer {
-	constructor( ) {
-		super( "vsize" );
+	constructor( next = true ) {
+		super( next ? "vsize-next" : "vsize-prev" );
 	}
 }

package/src/components/slider/slider.module.scss

@@ -8,7 +8,7 @@
  * @file slider.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/slider/slider.ts

@@ -8,7 +8,7 @@
  * @file slider.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/spreadsheet/spreadsheet.module.scss

@@ -8,7 +8,7 @@
  * @file spreadsheet.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/spreadsheet/spreadsheet.ts

@@ -8,7 +8,7 @@
  * @file spreadsheet.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/switch/switch.module.scss

@@ -8,7 +8,7 @@
  * @file switch.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/switch/switch.ts

@@ -8,7 +8,7 @@
  * @file switch.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/tabs/tabs.ts

@@ -8,7 +8,7 @@
  * @file tabs.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/textarea/textarea.module.scss

@@ -8,7 +8,7 @@
  * @file textarea.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/textarea/textarea.ts

@@ -8,7 +8,7 @@
  * @file textarea.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/textedit/textedit.module.scss

@@ -8,7 +8,7 @@
  * @file textedit.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.