x4js 2.0.34 → 2.1.0-manual

package/src/components/textedit/textedit.ts

@@ -1,122 +1,122 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file textedit.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 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.
- **/
-
-//import { EventCallback } from '../../core/core_events';
-import { Component, makeUniqueComponentId } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
-
-import { HBox } from '../boxes/boxes';
-import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
-import { Label } from '../label/label';
-
-import "./textedit.module.scss";
-
-//@todo: disabled
-
-/**
- * 
- */
-
-type TextEditInputs = TextInputProps | NumberProps | DateProps | TimeProps;
-
-interface TextEditBase {
-	label: string | UnsafeHtml;
-	labelWidth?: number;
-	inputWidth?: number;		
-	inputId?: string;
-	inputGadgets?: Component[];
-	inputAttrs?: any;
-}
-
-export type TextEditProps = TextEditInputs & TextEditBase;
-
-/*
-not enougth precise
-interface TextEditProps extends InputProps {
-	label: string | UnsafeHtml;
-	labelWidth?: number;
-	editWidth?: number;		
-	inputId?: string;
-
-	type?: "text" | "email" | "password" | "date" | "number" | "time";
-	name?: string;
-	readonly?: boolean;
-	required?: boolean;
-	value: string | number;
-	placeholder?: string;
-	autofocus?: boolean;
-
-	inputGadgets?: Component[];
-	inputAttrs?: any;
-
-	focus?: EventCallback<EvFocus>;
-	change?: EventCallback<EvChange>;
-}
-*/
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class TextEdit extends HBox {
-
-	private input: Input;
-
-	constructor( props: TextEditProps ) {
-		super( props );
-
-		if( !props.inputId ) {
-			props.inputId = makeUniqueComponentId()
-		}
-
-		if( props.required ) {
-			this.setAttribute( "required", true );
-		}
-
-		const gadgets = props.inputGadgets ?? [];
-		gadgets.forEach( g => {
-			g.addClass( "gadget" );
-		})
-
-
-		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
-		// no propagation...
-		delete iprops.cls;
-
-		this.setContent( [
-			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [
-				new Label( { tag: "label", text: props.label, labelFor: props.inputId } ),
-			]}) : null,
-			new HBox( { id: "edit", content: [
-				this.input = new Input( iprops ),
-				...gadgets,
-			]})
-		])
-	}
-
-	getValue( ) {
-		return this.input.getValue( );
-	}
-
-	setValue( value: string ) {
-		this.input.setValue( value );
-	}
-
-	getInput( ) {
-		return this.input;
-	}
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file textedit.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 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.
+ **/
+
+//import { EventCallback } from '../../core/core_events';
+import { Component, makeUniqueComponentId } from '../../core/component';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
+
+import { HBox } from '../boxes/boxes';
+import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
+import { Label } from '../label/label';
+
+import "./textedit.module.scss";
+
+//@todo: disabled
+
+/**
+ * 
+ */
+
+type TextEditInputs = TextInputProps | NumberProps | DateProps | TimeProps;
+
+interface TextEditBase {
+	label: string | UnsafeHtml;
+	labelWidth?: number;
+	inputWidth?: number;		
+	inputId?: string;
+	inputGadgets?: Component[];
+	inputAttrs?: any;
+}
+
+export type TextEditProps = TextEditInputs & TextEditBase;
+
+/*
+not enougth precise
+interface TextEditProps extends InputProps {
+	label: string | UnsafeHtml;
+	labelWidth?: number;
+	editWidth?: number;		
+	inputId?: string;
+
+	type?: "text" | "email" | "password" | "date" | "number" | "time";
+	name?: string;
+	readonly?: boolean;
+	required?: boolean;
+	value: string | number;
+	placeholder?: string;
+	autofocus?: boolean;
+
+	inputGadgets?: Component[];
+	inputAttrs?: any;
+
+	focus?: EventCallback<EvFocus>;
+	change?: EventCallback<EvChange>;
+}
+*/
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class TextEdit extends HBox {
+
+	private input: Input;
+
+	constructor( props: TextEditProps ) {
+		super( props );
+
+		if( !props.inputId ) {
+			props.inputId = makeUniqueComponentId()
+		}
+
+		if( props.required ) {
+			this.setAttribute( "required", true );
+		}
+
+		const gadgets = props.inputGadgets ?? [];
+		gadgets.forEach( g => {
+			g.addClass( "gadget" );
+		})
+
+
+		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
+		// no propagation...
+		delete iprops.cls;
+
+		this.setContent( [
+			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [
+				new Label( { tag: "label", text: props.label, labelFor: props.inputId } ),
+			]}) : null,
+			new HBox( { id: "edit", content: [
+				this.input = new Input( iprops ),
+				...gadgets,
+			]})
+		])
+	}
+
+	getValue( ) {
+		return this.input.getValue( );
+	}
+
+	setValue( value: string ) {
+		this.input.setValue( value );
+	}
+
+	getInput( ) {
+		return this.input;
+	}
+}

package/src/components/themes.scss

@@ -1,90 +1,90 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file themes.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 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.
- **/
-
-
-$color--base: #569cd6;
-$color--interval: 8.4%;
-
-:root {
-	--color-primary-a0: #ffffff;
-	--color-primary-a5:  #{lighten($color--base, 35%)};
-	--color-primary-a10:  #{lighten($color--base, $color--interval * 4)};
-	--color-primary-a20: #{lighten($color--base, $color--interval * 3)};
-	--color-primary-a30: #{lighten($color--base, $color--interval * 2)};
-	--color-primary-a40: #{lighten($color--base, $color--interval)};
-	--color-primary-a50: #{$color--base};
-	--color-primary-a55: #{darken($color--base,5%)};
-	--color-primary-a60: #{darken($color--base, $color--interval )};
-	--color-primary-a70: #{darken($color--base, $color--interval * 2)};
-	--color-primary-a80: #{darken($color--base, $color--interval * 3)};
-	--color-primary-a90: #{darken($color--base, $color--interval * 4)};
-	--color-primary-a100: #000000;
-
-	--color-danger-a30: #{lighten(#c01010,30%)};
-	--color-danger-a50: #c01010;
-	--color-danger-a60: #{darken(#c01010,10%)};
-
-	--color-warning-a50: #b67b0d;
-
-	--color-success-a50: #10c01f;
-	--color-success-a60: #{darken(#10c01f,10%)};
-}
-
-:root {
-	// Backgrounds
-	--background-primary: var(--color-primary-a0); // Fond principal
-	--background-secondary: var(--color-primary-a10); // Fond secondaire
-	--background-ternary: #f4f4f4; // Fond secondaire
-
-	// Texts
-	--text-primary: var(--color-primary-a100); // Texte principal
-	--text-secondary: #999; // Texte secondaire
-	--text-ternary: #666; // Texte tertiaire
-
-	// disabled
-	--disabled-background: #ccc;
-	--disabled-color: white;
-	--disabled-color-dark: #aaa;
-
-	// accents
-	--accent-background: var(--color-primary-a60); 
-	--accent-background-hover: var(--color-primary-a55); 
-	--accent-background-focus: var(--color-primary-a70);
-	--accent-background-active: var(--color-primary-a80); 
-
-	--accent-color: var(--color-primary-a0); 
-	--accent-color-hover: var(--color-primary-a0); 
-	--accent-color-focus: var(--color-primary-a0);
-	--accent-color-active: var(--color-primary-a0); 
-
-	// Borders
-	--border: #e1e1e1; // Bordures
-	--border-light: #eaeaea; // Bordures
-	--border-hover: #c2c2c2; // Bordures au survol
-	--border-focus: var( --accent-background ); // Bordures si focus
-
-	--alert-background: var( --color-danger-a50 );
-	--alert-background-active: var( --color-danger-a60 );
-	--alert-color: var( --color-primary-a0 );
-
-	--warning-background: var( --color-warning-a50 );
-	--warning-color: var( --color-primary-a0 );
-
-	--success-background: var( --color-success-a50 );
-	--success-background-active: var( --color-success-a60 );
-	--success-color: var( --color-success-a0 );
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file themes.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 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.
+ **/
+
+
+$color--base: #569cd6;
+$color--interval: 8.4%;
+
+:root {
+	--color-primary-a0: #ffffff;
+	--color-primary-a5:  #{lighten($color--base, 35%)};
+	--color-primary-a10:  #{lighten($color--base, $color--interval * 4)};
+	--color-primary-a20: #{lighten($color--base, $color--interval * 3)};
+	--color-primary-a30: #{lighten($color--base, $color--interval * 2)};
+	--color-primary-a40: #{lighten($color--base, $color--interval)};
+	--color-primary-a50: #{$color--base};
+	--color-primary-a55: #{darken($color--base,5%)};
+	--color-primary-a60: #{darken($color--base, $color--interval )};
+	--color-primary-a70: #{darken($color--base, $color--interval * 2)};
+	--color-primary-a80: #{darken($color--base, $color--interval * 3)};
+	--color-primary-a90: #{darken($color--base, $color--interval * 4)};
+	--color-primary-a100: #000000;
+
+	--color-danger-a30: #{lighten(#c01010,30%)};
+	--color-danger-a50: #c01010;
+	--color-danger-a60: #{darken(#c01010,10%)};
+
+	--color-warning-a50: #b67b0d;
+
+	--color-success-a50: #10c01f;
+	--color-success-a60: #{darken(#10c01f,10%)};
+}
+
+:root {
+	// Backgrounds
+	--background-primary: var(--color-primary-a0); // Fond principal
+	--background-secondary: var(--color-primary-a10); // Fond secondaire
+	--background-ternary: #f4f4f4; // Fond secondaire
+
+	// Texts
+	--text-primary: var(--color-primary-a100); // Texte principal
+	--text-secondary: #999; // Texte secondaire
+	--text-ternary: #666; // Texte tertiaire
+
+	// disabled
+	--disabled-background: #ccc;
+	--disabled-color: white;
+	--disabled-color-dark: #aaa;
+
+	// accents
+	--accent-background: var(--color-primary-a60); 
+	--accent-background-hover: var(--color-primary-a55); 
+	--accent-background-focus: var(--color-primary-a70);
+	--accent-background-active: var(--color-primary-a80); 
+
+	--accent-color: var(--color-primary-a0); 
+	--accent-color-hover: var(--color-primary-a0); 
+	--accent-color-focus: var(--color-primary-a0);
+	--accent-color-active: var(--color-primary-a0); 
+
+	// Borders
+	--border: #e1e1e1; // Bordures
+	--border-light: #eaeaea; // Bordures
+	--border-hover: #c2c2c2; // Bordures au survol
+	--border-focus: var( --accent-background ); // Bordures si focus
+
+	--alert-background: var( --color-danger-a50 );
+	--alert-background-active: var( --color-danger-a60 );
+	--alert-color: var( --color-primary-a0 );
+
+	--warning-background: var( --color-warning-a50 );
+	--warning-color: var( --color-primary-a0 );
+
+	--success-background: var( --color-success-a50 );
+	--success-background-active: var( --color-success-a60 );
+	--success-color: var( --color-success-a0 );
+}
+

package/src/components/tickline/tickline.module.scss

@@ -1,26 +1,26 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.2
- * 
- * @file tickline.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 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.
- **/
-
-:root {
-	--tickline-axis-color: var( --border );
-	--tickline-color: var( --accent-color );
-	--tickline-background: white;
-}
-
-.x-tick-line {
-	position: relative;
-	background-color: var( --tickline-background );
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file tickline.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 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.
+ **/
+
+:root {
+	--tickline-axis-color: var( --border );
+	--tickline-color: var( --accent-color );
+	--tickline-background: white;
+}
+
+.x-tick-line {
+	position: relative;
+	background-color: var( --tickline-background );
 }

package/src/components/tickline/tickline.ts

@@ -1,82 +1,82 @@
-import { SvgBuilder, SvgComponent } from '../../core/core_svg';
-import { Color } from '../../core/core_colors';
-import { Component, ComponentProps } from '../../core/component';
-
-import "./tickline.module.scss"
-
-interface TickLineProps extends ComponentProps {
-	values: number[];
-	min?: number;
-	max?: number;
-	color?: Color;			
-	background?: Color;		
-	type: "bars" | "line";	
-}
-
-
-export class TickLine extends Component<TickLineProps> {
-	
-	constructor( props: TickLineProps ) {
-		super( props );
-
-		this.addDOMEvent( "resized", ( ) => this.update( ) );
-	}
-
-	update( ) {
-		const props = this.props;
-		const vals = props.values;
-
-		if( !vals.length  ) {
-			this.clearContent( );
-			return;
-		}
-		
-		const rc = this.getBoundingRect( );
-		const min = props.min ?? 0;
-		const max = props.max ?? 100;
-
-		const xmul = rc.width/vals.length;
-		const ymul = rc.height/(max-min);
-
-		const bld = new SvgBuilder( );
-
-		if( props.background ) {
-			bld.rect( 0, 0, rc.width, rc.height )
-				.fill( props.background.toHexString() );
-		}
-
-		if( min!=0 ) {
-			bld.path( )
-				.moveTo( 0, 0-min )
-				.lineTo( rc.width, 0-min )
-				.stroke( "var(--tickline-axis-color)", 1 )
-				.antiAlias( false )
-		}
-
-		if( props.type=="line" ) {
-			const pth = bld.path( );
-			for( let x=0; x<vals.length; x++ ) {
-				if( x==0 ) {
-					pth.moveTo( x*xmul, (vals[x]-min)*ymul );
-				}
-				else {
-					pth.lineTo( x*xmul, (vals[x]-min)*ymul );
-				}
-			}
-
-			pth.stroke( props.color ? props.color.toHexString() : "var(--tickline-color)", 1 )
-				.no_fill( );
-		}
-		else {
-			for( let x=0; x<vals.length; x++ ) {
-				bld.rect( x*xmul, (0-min)*ymul, xmul-1, vals[x]*ymul )
-					.fill( props.color ? props.color.toHexString() : "var(--tickline-color)" )
-					.antiAlias( false );
-			}
-		}
-
-
-
-		this.setContent( new SvgComponent( {width: "100%", height: "100%", svg: bld, attrs: { viewport:`0 ${props.min??0} ${vals.length} ${props.max??100}` } } ) );
-	}
+import { SvgBuilder, SvgComponent } from '../../core/core_svg';
+import { Color } from '../../core/core_colors';
+import { Component, ComponentProps } from '../../core/component';
+
+import "./tickline.module.scss"
+
+interface TickLineProps extends ComponentProps {
+	values: number[];
+	min?: number;
+	max?: number;
+	color?: Color;			
+	background?: Color;		
+	type: "bars" | "line";	
+}
+
+
+export class TickLine extends Component<TickLineProps> {
+	
+	constructor( props: TickLineProps ) {
+		super( props );
+
+		this.addDOMEvent( "resized", ( ) => this.update( ) );
+	}
+
+	update( ) {
+		const props = this.props;
+		const vals = props.values;
+
+		if( !vals.length  ) {
+			this.clearContent( );
+			return;
+		}
+		
+		const rc = this.getBoundingRect( );
+		const min = props.min ?? 0;
+		const max = props.max ?? 100;
+
+		const xmul = rc.width/vals.length;
+		const ymul = rc.height/(max-min);
+
+		const bld = new SvgBuilder( );
+
+		if( props.background ) {
+			bld.rect( 0, 0, rc.width, rc.height )
+				.fill( props.background.toHexString() );
+		}
+
+		if( min!=0 ) {
+			bld.path( )
+				.moveTo( 0, 0-min )
+				.lineTo( rc.width, 0-min )
+				.stroke( "var(--tickline-axis-color)", 1 )
+				.antiAlias( false )
+		}
+
+		if( props.type=="line" ) {
+			const pth = bld.path( );
+			for( let x=0; x<vals.length; x++ ) {
+				if( x==0 ) {
+					pth.moveTo( x*xmul, (vals[x]-min)*ymul );
+				}
+				else {
+					pth.lineTo( x*xmul, (vals[x]-min)*ymul );
+				}
+			}
+
+			pth.stroke( props.color ? props.color.toHexString() : "var(--tickline-color)", 1 )
+				.no_fill( );
+		}
+		else {
+			for( let x=0; x<vals.length; x++ ) {
+				bld.rect( x*xmul, (0-min)*ymul, xmul-1, vals[x]*ymul )
+					.fill( props.color ? props.color.toHexString() : "var(--tickline-color)" )
+					.antiAlias( false );
+			}
+		}
+
+
+
+		this.setContent( new SvgComponent( {width: "100%", height: "100%", svg: bld, attrs: { viewport:`0 ${props.min??0} ${vals.length} ${props.max??100}` } } ) );
+	}
 }