x4js 2.3.13 → 2.3.15

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 ) {

package/src/components/popup/popup.ts

@@ -233,7 +233,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			if( idx>=0 ) {
 				autoclose_list.splice( idx, 1 );
 				if( autoclose_list.length==0 ) {
-					document.removeEventListener( "pointerdown", this._dismiss );
+					document.removeEventListener( "pointerdown", this._dismiss, true );
 				}
 			}
 		}
@@ -263,7 +263,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 				
 		if( this.props.autoClose ) {
 			if( autoclose_list.length==0 ) {
-				document.addEventListener( "pointerdown", this._dismiss );
+				document.addEventListener( "pointerdown", this._dismiss, true );
 			}
 
 			autoclose_list.push( this );
@@ -322,6 +322,10 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 
 	/**
 	 * binded
+	 *
+	 * listened on the document while the event goes down (capture): a press
+	 * closes the popups even when what is pressed stops its propagation.
+	 * the event is left as it is, what is pressed handles it as usual.
 	 */
 
 	private _dismiss = ( e: UIEvent ) => {
@@ -330,9 +334,6 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			return;
 		}
 
-		e.preventDefault( );
-		e.stopPropagation( );
-
 		this.dismiss( );
 	}
 	
@@ -368,7 +369,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		const list = inc_group.reverse( );
 		autoclose_list = excl_group;
 		if( autoclose_list.length==0 ) {
-			document.removeEventListener( "pointerdown", this._dismiss );
+			document.removeEventListener( "pointerdown", this._dismiss, true );
 		}
 		
 		list.forEach( x => x.close() );

package/src/components/propgrid/progrid.module.scss

@@ -12,8 +12,12 @@
 	--propertygrid-odd-background: var(--color-primary-a5);
 	--propertygrid-even-background: transparent;
 	--propertygrid-disabled-background: rgb(170 170 170 / 14%);
+	--propertygrid-hover-background: var(--color-primary-a10);
+	--propertygrid-focus-background: var(--color-primary-a20);
+	--propertygrid-input-background: rgba(255,255,255,0.6);
 
     --propertygrid-group-background: var( --color-primary-a5 );
+    --propertygrid-group-color: var( --color-primary-a50 );
 }
 
 .x4propertygrid {
@@ -36,19 +40,23 @@
 		margin: 0;
 	}
 
+	// Two columns shared by all the rows: the titles, as wide as the longest
+	// of them but never more than half of the grid, and the editors, which
+	// take the rest.
 	.root {
 		display: grid;
-		grid-template-columns: 1fr;
+		grid-template-columns: fit-content( 50% ) 1fr;
 		grid-template-rows: auto;
 	}
 
 	.group {
+		grid-column: 1 / -1;
 		padding: 6px 4px 4px 4px;
 		min-height: 2em;
 		background-color: var( --propertygrid-group-background );
 		margin-bottom: 8px;
         box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.4);
-        color: var(--color-primary-a50);
+        color: var( --propertygrid-group-color );
         display: flex;
 		align-items: center;
 		padding: 8px;
@@ -75,14 +83,14 @@
             
             &>.x4button {
                 background-color: transparent;
-                color: var(--color-primary-a50);
+                color: var( --propertygrid-group-color );
             }
-         
+
             &>.x4label {
                 .x4icon {
                     .fa-secondary,
                     .fa-primary {
-                        fill: var( --color-primary-a50 );
+                        fill: var( --propertygrid-group-color );
                     }
 
                     width: 1em;
@@ -103,52 +111,62 @@
 		}
 
 		&:not( :last-child ) {
-			border-bottom: 1px solid var(--color-primary-a50);
+			border-bottom: 1px solid var( --propertygrid-group-color );
 			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 		}
 	}
 
+	// A row has no box of its own: its two cells go straight on the columns
+	// of the grid, which is how all the titles get the same width. (A row is
+	// a fieldset: it cannot be a subgrid.) What a row looked like, background
+	// and bottom line, is carried by its cells.
 	.row {
-		border-bottom: 1px solid var( --border-light );
-		//border-top: none;
-		//border-left: 1px solid var(--color-primary-a50);
-		//border-right: 1px solid var(--color-primary-a50);
+		display: contents;
+
+		> .cell {
+			min-width: 0;
+	    	padding: 4px;
+			border-bottom: 1px solid var( --border-light );
+
+			input {
+				background: var( --propertygrid-input-background );
+			}
+		}
 
-		&.even:not(:disabled) {
+		&.even:not(:disabled) > .cell {
 			background-color: var(--propertygrid-even-background)
 		}
-		
-		&.odd:not(:disabled) {
+
+		&.odd:not(:disabled) > .cell {
 			background-color: var(--propertygrid-odd-background)
 		}
-		
-		&.odd:disabled {
+
+		&.odd:disabled > .cell {
 			background-color: var(--propertygrid-disabled-background)
 		}
-		
-		&:has(:focus) {
-			background-color: var(--color-primary-a20);
-		}
 
-		&:hover {
-			background-color: var(--color-primary-a10);
+		&:has(:focus) > .cell {
+			background-color: var( --propertygrid-focus-background );
 		}
-		
-		.cell {
-			flex-grow: 1;
-			flex-basis: 10px;
-	    	padding: 4px;
 
-			input {
-				background: rgba(255,255,255,0.6);
-			}
+		&:hover > .cell {
+			background-color: var( --propertygrid-hover-background );
 		}
 
-		.cell:first-child {
+		> .cell:first-child {
 			border-right: 1px solid var( --border );
 		}
 
-		.hdr {
+		// a row without title (a button): its editor takes the two columns
+		> .cell:only-child {
+			grid-column: 1 / -1;
+		}
+
+		// The title, centered in the height of the row. Wider than half of
+		// the grid, it is cut by the column and goes on several lines.
+		> .hdr {
+			display: flex;
+			align-items: center;
 			padding: 8px;
 			padding-left: 34px;
 		}

package/src/components/propgrid/propgrid.ts

@@ -23,6 +23,8 @@ import { ListboxID, ListItem } from "../listbox/listbox"
 import { Label, SimpleText } from "../label/label"
 import { asap, class_ns, isFunction, isNumber } from '../../core/core_tools';
 import { Icon, ScrollView } from '../components'
+import { ColorInput } from '../colorinput/colorinput'
+import { EvColorChange } from '../colorpicker/colorpicker'
 
 import icons from "../assets/icons"
 
@@ -32,12 +34,14 @@ type IValue = boolean | number | string;
 type IValueCB = ( name: string) => IValue;
 
 export interface PropertyValue {
-	type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'label' | 'button';
+	type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'color' | 'label' | 'button';
 	title?: string;
 	desc?: string;
 	name?: string;
 	value: IValue | IValueCB;
 	options?: ListItem[];
+	swatches?: string[] | ( ( ) => string[] );	// for colors: offered in the picker; a function is called when it opens
+	nullable?: boolean;	// for colors: "no color" can be chosen, the value is then null
 	callback?: ( name: string, value: any ) => void;
 	live?: boolean;	// for live update 
 	cls?: string;
@@ -67,6 +71,16 @@ export interface PropertyProps extends ComponentProps {
  * @cssvar
  * ```
  * --propertygrid-background
+ * --propertygrid-odd-background
+ * --propertygrid-even-background
+ * --propertygrid-disabled-background
+ * --propertygrid-hover-background
+ * --propertygrid-focus-background
+ * --propertygrid-input-background
+ * --propertygrid-group-background
+ * --propertygrid-group-color
+ * --propertygrid-gadget-background
+ * --propertygrid-gadget-color
  * ```
  */
 
@@ -260,10 +274,23 @@ export class PropertyGrid extends VBox {
 				}
 			});
 		}
+		else if (item.type === 'color') {
+			editor = new ColorInput({
+				id: item.name,
+				color: value as string,
+				format: "hex",
+				picker: true,
+				swatches: item.swatches,
+				nullable: item.nullable,
+				change: ( e: EvColorChange ) => {
+					item.callback?.( item.name, e.value );
+				}
+			});
+		}
 		else if (item.type === 'label') {
-			editor = new Label({ 
+			editor = new Label({
 				id: item.name,
-				text: value as string, 
+				text: value as string,
 			});
 		}
 		else if (item.type === 'button') {
@@ -347,6 +374,12 @@ export class PropertyGrid extends VBox {
 				editor.setNumValue( value as number, -2 );
 			}
 		}
+		else if (item.type === 'color') {
+			const editor = this.root.query<ColorInput>( '#'+item.name );
+			if( editor ) {
+				editor.setColor( value as string );
+			}
+		}
 		else if (item.type === 'label') {
 			const label = this.root.query<Label>( '#'+item.name );
 			if( label ) {

package/src/core/component.ts

@@ -21,6 +21,7 @@ import { CoreEvent, EventMap } from './core_events';
 import { addEvent, DOMEventHandler, GlobalDOMEvents, COMPONENT } from './core_dom';
 import { Application, EvMessage } from './core_application';
 import { makeState } from './core_state.js';
+import { Shortcuts, ShortcutCallback, ShortcutOptions } from './core_shortcuts';
 
 type ComponentAttributes = Record<string,string|number|boolean>;
 type CreateComponentCallBack =  ( attrs: Record<string,string> ) => ComponentContent;
@@ -70,6 +71,15 @@ export const makeUniqueComponentId = ( ) => {
 	return `x4-${gen_id++}`;
 }
 
+/**
+ * CSS properties. A number gets "px", except for the unitless properties
+ * (opacity, lineHeight, flexGrow...).
+ */
+
+export type StyleProps = {
+	[K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] | number;
+};
+
 /**
  * Base properties for all components.
  */
@@ -80,7 +90,7 @@ export interface ComponentProps {
 	/** Namespace for SVG/MathML elements. */
     ns?: string;
 	/** Inline CSS styles. */
-    style?: Partial<CSSStyleDeclaration>;
+    style?: StyleProps;
 	/** HTML attributes. */
     attrs?: Record<string,string|number|boolean>;
 	/** Child content (components, strings, or HTML). */
@@ -160,6 +170,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	#store: Map<string|symbol,any>;
 	#pstate: any;
+	#shortcuts: Shortcuts;
 
 	constructor(props: P) {
 		super( );
@@ -685,17 +696,17 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @returns The component instance for chaining.
      */
 
-	setStyle( style: Partial<CSSStyleDeclaration> ): this {
+	setStyle( style: StyleProps ): this {
 		const _style = (this.dom as HTMLElement).style;
 
 		for( const name in style ) {
-			
-			let value = style[name];
+
+			let value: any = style[name];
 			if( !unitless[name] && (isNumber(value) || RE_NUMBER.test(value)) ) {
 				value += "px";
 			}
 
-			_style[name] = value;
+			(_style as any)[name] = value;
 		}
 
 		return this;
@@ -1160,6 +1171,40 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return null;
 	}
 
+	// :: SHORTCUTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+	 * Adds a keyboard shortcut to the component. It works while the focus
+	 * is in the component, and while the focus is nowhere if this component
+	 * is the last one with shortcuts that had it: of two views that are shown
+	 * together, the one the user works in answers.
+	 *
+	 * A key that a child has used (it prevented its default, or stopped its
+	 * propagation) is not a shortcut. Nor is a key typed in a field, unless
+	 * `editable` is set.
+	 *
+	 * @param keys - "Mod+C", "Shift+Mod+Z", "Delete"... or several of them. Mod is Ctrl, or Cmd on a Mac.
+	 * @see Application.addShortcut for the shortcuts of the whole application
+	 *
+	 * @example
+	 * this.addShortcut( "Mod+C", ( ) => this.copy( ) );
+	 * this.addShortcut( ["Mod+Y", "Shift+Mod+Z"], ( ) => this.redo( ) );
+	 */
+
+	addShortcut( keys: string | string[], callback: ShortcutCallback, options?: ShortcutOptions ): this {
+		if( !this.#shortcuts ) {
+			const shortcuts = this.#shortcuts = new Shortcuts( );
+
+			// straight on the element, not with addDOMEvent: the handlers of the
+			// children are called exactly as before
+			this.dom.addEventListener( "keydown", ( ev: KeyboardEvent ) => shortcuts.handle( ev ) );
+			this.dom.addEventListener( "focusin", ( ) => Application.instance( ).setActiveShortcuts( this, shortcuts ) );
+		}
+
+		this.#shortcuts.add( keys, callback, options );
+		return this;
+	}
+
 	// :: PERSISTENCE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 	protected loadPState( name: string, defaults: Record<string, any> ): any {
@@ -1185,9 +1230,10 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 		const state = makeState( raw );
 
+		// the state is what is saved, not raw: makeState works on a copy of it
 		state.on( "change", ( ) => {
 			this.setTimeout( key, 500, ( ) => {
-				Application.instance().setStorage( key, JSON.stringify( raw ) );
+				Application.instance().setStorage( key, JSON.stringify( state ) );
 		} );
 		});