x4js 2.3.12 → 2.3.14

package/src/components/colorinput/colorinput.ts

@@ -1,40 +1,70 @@
-/** 
+/**
  *  ___  ___ __
  *  \  \/  /  / _
  *   \    /  /_| |_
- *   /    \____   _|  
+ *   /    \____   _|
  *  /__/\__\   |_|
- * 
+ *
  * @file colorinput.ts
- * @author Etienne Cochard 
- * 
+ * @author Etienne Cochard
+ *
  * @copyright (c) 2026 R-libre ingenierie
  *
- * Use of this source code is governed by an MIT-style license 
+ * 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 { Component } from '../../core/component';
-import { isFeatureAvailable, class_ns } from '../../core/core_tools';
+import { Component, ComponentEvents } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { isFeatureAvailable, class_ns, isFunction, IComponentInterface, IFormElement } from '../../core/core_tools';
 import { Color } from '../../core/core_colors';
 
 import { BoxProps, HBox } from '../boxes/boxes';
 import { Input } from '../input/input';
 import { Button } from '../button/button';
+import { Popup } from '../popup/popup';
+import { ColorPicker, EvColorChange } from '../colorpicker/colorpicker';
 
 
 import "./colorinput.module.scss"
 import icon from "./crosshairs-simple-sharp-light.svg"
 
-//TODO: add swatches
 //TODO: better keyboard handling (selection after cursor)
 
+type Swatches = ( Color | string )[];
+
 /**
- * 
+ *
  */
 
-interface ColorInputProps extends BoxProps {
+export interface ColorInputProps extends BoxProps {
+	/** The color at start. null: no color is shown. */
 	color: Color | string;
+
+	/** Name of the field: with it, a Form reads and writes the color (as "#rrggbb"). */
+	name?: string;
+
+	/** How the field writes the color. "rgb" by default: rgb(r,g,b). "hex": #rrggbb. */
+	format?: "rgb" | "hex";
+
+	/** A click on the swatch opens a color picker. */
+	picker?: boolean;
+
+	/**
+	 * Colors offered in the picker. A function is called each time the
+	 * picker opens: the list may change with time.
+	 */
+	swatches?: Swatches | ( ( ) => Swatches );
+
+	/** The field may have no color: emptied, or "no color" picked. */
+	nullable?: boolean;
+
+	/** The user changed the color (not fired by setColor). */
+	change?: EventCallback<EvColorChange>;
+}
+
+interface ColorInputEvents extends ComponentEvents {
+	change: EvColorChange;
 }
 
 /**
@@ -43,56 +73,196 @@ interface ColorInputProps extends BoxProps {
  * --colorinput-btn-background
  * --colorinput-btn-color
  * --colorinput-btn-color-hover
+ * --colorinput-popup-background
  * ```
  */
 
 @class_ns( "x4" )
-export class ColorInput extends HBox<ColorInputProps> {
+export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 	static "$cls-ns" = "x4";
 
+	private _color: Color;				// null: no color
+	private _swatch: Component;
+	private _edit: Input;
+	private _swatches: Swatches | ( ( ) => Swatches );
+	private _popup: Popup;				// the color picker, once it was opened
+
 	constructor( props: ColorInputProps ) {
 		super( props );
 
-		let swatch: Component;
-		let edit: Input;
+		this.mapPropEvents( props, "change" );
+		this._swatches = props.swatches;
+
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
 
 		this.setContent( [
-			swatch = new Component( { cls: "swatch" } ),
-			edit = new Input( { type: "text", value: "", spellcheck: false } ),
+			this._swatch = new Component( { cls: "swatch" } ),
+			this._edit = new Input( { type: "text", value: "", spellcheck: false } ),
 
 			isFeatureAvailable("eyedropper") ? new Button( { icon: icon, click: ( ) => {
 				const eyeDropper = new (window as any).EyeDropper();
 				eyeDropper.open( ).then( ( result: any ) => {
-					color = new Color( result.sRGBHex );
-					updateColor( color );
+					this._changed( new Color( result.sRGBHex ) );
 				}).catch( (_: any ) => {
 					/* silence */
 				});
 			} } ) : null
 		])
 
-		edit.addDOMEvent( "input", ( ) => {
-			const txt = edit.getValue( );
+		this._edit.addDOMEvent( "input", ( ) => {
+			const txt = this._edit.getValue( );
+
+			if( this.props.nullable && txt.trim( )=="" ) {
+				this._changed( null, false );
+				return;
+			}
+
 			const clr = new Color( txt );
 			if( !clr.isInvalid() ) {
-				color = clr;
-				updateColor( color );
+				this._changed( clr );
 			}
 		});
 
-		const updateColor = ( clr: Color ) => {
-			swatch.setStyleValue( "backgroundColor", clr.toRgbString(false) );
-			edit.setValue( clr.toRgbString(false) );
+		if( props.picker ) {
+			// A click on the swatch opens the picker, a second one closes it.
+			// The picker closes by itself as soon as the button goes down
+			// outside of it: whether it was open is to be known before that.
+			let wasOpen = false;
+
+			this._swatch.addClass( "picker" );
+			this._swatch.addDOMEvent( "pointerdown", ( ) => { wasOpen = !!this._popup?.isOpen( ); } );
+			this._swatch.addDOMEvent( "click", ( ) => {
+				if( !wasOpen ) {
+					this._openPicker( );
+				}
+			} );
+		}
+
+		this._show( this._parse( props.color ) );
+	}
+
+	private _parse( color: Color | string ): Color {
+		if( color instanceof Color ) {
+			return color;
 		}
 
-		let color: Color;
-		if( props.color instanceof Color ) {
-			color = props.color;
+		// Nothing to show (a color that is not known, or several ones). Whether
+		// the user may choose "no color" is another matter: props.nullable.
+		if( color===null || color===undefined || color==="" ) {
+			return null;
+		}
+
+		return new Color( color );
+	}
+
+	private _format( color: Color ): string {
+		return this.props.format=="hex" ? color.toHexString( ) : color.toRgbString( false );
+	}
+
+	/**
+	 * show a color: swatch and text
+	 * @param text false while the user empties the field: the text is left alone
+	 */
+
+	private _show( color: Color, text = true ) {
+		this._color = color;
+
+		this._swatch.setClass( "none", !color );
+		this._swatch.setStyleValue( "backgroundColor", color ? color.toRgbString(false) : null );
+
+		if( text ) {
+			this._edit.setValue( color ? this._format( color ) : "" );
 		}
-		else {
-			color = new Color( props.color );
+	}
+
+	/**
+	 * the user changed the color
+	 */
+
+	private _changed( color: Color, text = true ) {
+		this._show( color, text );
+		this.fire( "change", { color, value: color ? color.toHexString( ) : null } );
+	}
+
+	/**
+	 * The color picker, with the swatches, under the field. It closes on
+	 * a click outside of it.
+	 */
+
+	private _openPicker( ) {
+		const swatches = isFunction( this._swatches ) ? this._swatches( ) : this._swatches;
+
+		// the picker works on its own color: it changes it in place
+		const picker = new ColorPicker( {
+			color: this._color ? new Color( this._color.toHexString( ) ) : new Color( 255, 255, 255 ),
+			swatches,
+			nullable: this.props.nullable,
+		} );
+
+		const popup = this._popup = new Popup( { cls: "x4colorinput-popup", autoClose: true, content: picker } );
+
+		// after the construction: the picker fires a first change when it is built
+		picker.on( "change", ev => {
+			this._changed( ev.color ? new Color( ev.value ) : null );
+
+			if( !ev.color ) {
+				popup.close( );
+			}
+		} );
+
+		popup.displayNear( this.getBoundingRect( ), "top left", "bottom left", { x: 0, y: 6 } );
+	}
+
+	/**
+	 * The current color, null when there is none.
+	 */
+
+	getColor( ): Color {
+		return this._color;
+	}
+
+	/**
+	 * The current color as "#rrggbb" ("#rrggbbaa" when it is not opaque),
+	 * null when there is none.
+	 */
+
+	getValue( ): string {
+		return this._color ? this._color.toHexString( ) : null;
+	}
+
+	/**
+	 * Shows another color, or none (null). Does not fire `change`.
+	 */
+
+	setColor( color: Color | string ) {
+		this._show( this._parse( color ) );
+	}
+
+	/**
+	 * Changes the colors offered in the picker (see props.swatches).
+	 */
+
+	setSwatches( swatches: Swatches | ( ( ) => Swatches ) ) {
+		this._swatches = swatches;
+	}
+
+	/**
+	 *
+	 */
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getValue( ); },
+				setRawValue: ( v: any ) => { this.setColor( v ); },
+				isValid: ( ) => { return true; }
+			};
+
+			return i as unknown as T;
 		}
 
-		updateColor( color );
+		return super.queryInterface( name );
 	}
-}
+}

package/src/components/colorpicker/colorpicker.module.scss

@@ -130,4 +130,27 @@
 			}
 		}
 	}
+
+	// the colors offered under the sliders (props.swatches)
+	.swatches {
+		flex-wrap: wrap;
+		gap: 4px;
+
+		.item {
+			width: 18px;
+			height: 18px;
+			border: 1px solid var( --border );
+			border-radius: 3px;
+			cursor: pointer;
+
+			&:hover {
+				border-color: var( --border-focus );
+			}
+
+			// no color: crossed out
+			&.none {
+				background: linear-gradient( to top right, transparent 45%, #d04040 45%, #d04040 55%, transparent 55% );
+			}
+		}
+	}
 }

package/src/components/colorpicker/colorpicker.ts

@@ -17,13 +17,19 @@
 import { Color, Hsv } from '../../core/core_colors';
 import { Rect, clamp, class_ns, isFeatureAvailable } from '../../core/core_tools';
 
-import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
 
 import "./colorpicker.module.scss"
 
-interface ColorPickerProps extends ComponentProps {
+export interface ColorPickerProps extends ComponentProps {
 	color: string | Color;
+
+	/** Colors offered under the sliders, to be picked with a click. */
+	swatches?: ( string | Color )[];
+
+	/** Adds a "no color" swatch: picking it fires `change` with a null color. */
+	nullable?: boolean;
 }
 
 interface HueChangeEvent extends ComponentEvent {
@@ -127,6 +133,18 @@ export class Saturation extends Box<BoxProps,CommonEvents> {
 		this.color.setStyleValue( "backgroundColor", base.toRgbString(false) );
 	}
 
+	/**
+	 * Shows another color: base color and thumb. Does not fire `sat_change`.
+	 */
+
+	setColor( hsv: Hsv ) {
+		this.hsv.saturation = hsv.saturation;
+		this.hsv.value = hsv.value;
+
+		this.updateBaseColor( hsv );
+		this.updateThumbMarker( );
+	}
+
 	move( sens: string, delta: number ) {
 		switch( sens ) {
 			case 'saturation': {
@@ -335,31 +353,41 @@ class AlphaSlider extends Box<BoxProps,CommonEvents> {
  * 
  */
 
-interface ChangeEvent extends ComponentEvent {
+/**
+ * Fired by ColorPicker and ColorInput when the user changes the color.
+ *
+ * `value` is the color as text: "#rrggbb", or "#rrggbbaa" when it is not
+ * opaque. Both are null when the user picked "no color" (`nullable`).
+ */
+
+export interface EvColorChange extends EvChange {
 	color: Color;
+	readonly value: string;
 }
 
 interface ColorPickerChangeEvents extends ComponentEvents {
-	change: ChangeEvent
+	change: EvColorChange
 }
 
 /**
- * 
+ *
  */
 
 @class_ns( "x4" )
 export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents> {
 
 	private _base: Color;
+	private _hsv: Hsv;
 	private _sat: Saturation;
 	private _swatch: Component;
 	private _hue: HueSlider;
 	private _alpha: AlphaSlider;
+	private _swatches: HBox;
 
 
 	constructor( props: ColorPickerProps ) {
 		super( props );
-	
+
 		if( props.color instanceof Color ) {
 			this._base = props.color;
 		}
@@ -367,7 +395,7 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 			this._base = new Color( props.color );
 		}
 
-		let hsv = this._base.toHsv( );
+		const hsv = this._hsv = this._base.toHsv( );
 
 		this.setAttribute( "tabindex", 0 );
 
@@ -385,48 +413,34 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 						this._swatch = new Component( { cls: "overlay" } ),
 					] } )
 				]
-			})
+			}),
+			this._swatches = new HBox( { cls: "swatches" } ),
 		]);
 
 		this._sat.on( "sat_change", ( ev ) => {
-			hsv.saturation = ev.saturation;
-			hsv.value = ev.value;
-			updateColor( );
-			this._alpha.updateBaseColor( hsv );
+			this._hsv.saturation = ev.saturation;
+			this._hsv.value = ev.value;
+			this._changed( );
+			this._alpha.updateBaseColor( this._hsv );
 		} );
 
 		this._hue.on( 'hue_change', ( ev ) => {
-			hsv.hue = ev.hue;
-			this._sat.updateBaseColor( hsv );
-			this._alpha.updateBaseColor( hsv );
-			updateColor( );
+			this._hsv.hue = ev.hue;
+			this._sat.updateBaseColor( this._hsv );
+			this._alpha.updateBaseColor( this._hsv );
+			this._changed( );
 		} );
 
 		this._alpha.on( 'alpha_change', ( ev ) => {
-			hsv.alpha = ev.alpha;
-			updateColor( );
+			this._hsv.alpha = ev.alpha;
+			this._changed( );
 		} );
 
-		const updateColor = ( ) => {
-			this._base.setHsv( hsv.hue, hsv.saturation, hsv.value, hsv.alpha );
-			this._swatch.setStyleValue( "backgroundColor", this._base.toRgbString() );
-			this._swatch.setAttribute( "tooltip", this._base.toRgbString() );
-
-			this.fire( "change", { color: this._base } );
-		}
-
 		if( isFeatureAvailable("eyedropper") ) {
 			this._swatch.addDOMEvent( "click", ( e ) => {
 				const eyeDropper = new (window as any).EyeDropper();
 				eyeDropper.open( ).then( ( result: any ) => {
-					const color = new Color( result.sRGBHex );
-					hsv = color.toHsv( );
-
-					this._alpha.setColor( hsv );
-					
-					this._sat.updateBaseColor( hsv );
-					this._hue.updateHue( hsv );
-					updateColor( );
+					this._pick( new Color( result.sRGBHex ) );
 				}).catch( (_: any )=> {
 					/* silence */
 				} );
@@ -435,7 +449,107 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 
 		this.addDOMEvent( "keydown", ( ev ) => this._onkey( ev ) );
 
-		updateColor( );
+		this.setSwatches( props.swatches );
+		this._changed( );
+	}
+
+	/**
+	 * the sliders moved: compute the color, show it, tell it
+	 */
+
+	private _changed( ) {
+		const hsv = this._hsv;
+
+		this._base.setHsv( hsv.hue, hsv.saturation, hsv.value, hsv.alpha );
+		this._refresh( );
+		this._notify( );
+	}
+
+	private _refresh( ) {
+		this._swatch.setStyleValue( "backgroundColor", this._base.toRgbString() );
+		this._swatch.setAttribute( "tooltip", this._base.toRgbString() );
+	}
+
+	private _notify( ) {
+		this.fire( "change", { color: this._base, value: this._base.toHexString() } );
+	}
+
+	/**
+	 * the user took a color as a whole (eye dropper, swatch)
+	 */
+
+	private _pick( color: Color ) {
+		this.setColor( color );
+		this._notify( );
+	}
+
+	/**
+	 * The current color. It is the object the `change` event gives, and it
+	 * changes with the picker: copy it to keep a value.
+	 */
+
+	getColor( ): Color {
+		return this._base;
+	}
+
+	/**
+	 * Shows another color. Does not fire `change`.
+	 */
+
+	setColor( color: Color | string ) {
+		const rgb = ( color instanceof Color ? color : new Color( color ) ).toRgb( );
+
+		// the color itself is kept as given: going through hsv could shift it
+		this._base.setRgb( rgb.red, rgb.green, rgb.blue, rgb.alpha );
+
+		const hsv = this._base.toHsv( );
+		this._hsv.hue = hsv.hue;
+		this._hsv.saturation = hsv.saturation;
+		this._hsv.value = hsv.value;
+		this._hsv.alpha = hsv.alpha;
+
+		this._sat.setColor( this._hsv );
+		this._hue.updateHue( this._hsv );
+		this._alpha.setColor( this._hsv );
+
+		this._refresh( );
+	}
+
+	/**
+	 * Colors offered under the sliders. A click on one of them takes it
+	 * and fires `change`. Nothing is shown without swatches.
+	 */
+
+	setSwatches( swatches: ( string | Color )[] ) {
+		const items: Component[] = [];
+
+		if( this.props.nullable ) {
+			items.push( new Component( {
+				cls: "item none",
+				dom_events: {
+					click: ( ) => this.fire( "change", { color: null, value: null } ),
+				},
+			} ) );
+		}
+
+		for( const swatch of swatches ?? [] ) {
+			const color = swatch instanceof Color ? swatch : new Color( swatch );
+			if( color.isInvalid( ) ) {
+				continue;
+			}
+
+			items.push( new Component( {
+				cls: "item",
+				tooltip: color.toHexString( ),
+				style: { backgroundColor: color.toRgbString( ) },
+				dom_events: {
+					click: ( ) => this._pick( color ),
+				},
+			} ) );
+		}
+
+		this._swatches.setContent( items );
+		this._swatches.show( items.length>0 );
 	}
 
 	private _onkey( ev: KeyboardEvent ) {