x4js 2.0.12 → 2.0.14

package/lib/src/components/slider/slider.ts

@@ -1,143 +1,198 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file slider.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 { Component, ComponentEvents, ComponentProps, ComponentEvent } from '../../core/component';
-import { Rect } from '../../core/core_tools.js';
-
-import { HBox } from '../boxes/boxes';
-import { Input } from '../input/input.js';
-
-import './slider.module.scss';
-
-interface ChangeEvent extends ComponentEvent {
-	value: number;
-}
-
-interface SliderEvents extends ComponentEvents {
-	change: ChangeEvent;
-}
-
-interface SliderProps extends ComponentProps {
-	value: number;
-	min: number;
-	max: number;
-	step?: number;
-}
-
-export class Slider extends Component<SliderProps,SliderEvents> {
-
-	private _mdown = false;
-	private _irect: Rect = null;
-	private _thumb: Component = null;
-	private _bar: Component = null;
-	private _range: Input = null;
-
-
-	constructor( props: SliderProps ) {
-		super( props );
-
-		this.setContent( [
-			new HBox( { cls: "track", content: [
-				this._bar = new Component( { cls: "bar" } ),
-				this._thumb = new Component( { cls: "thumb" } ),
-			] }),
-			this._range = new Input( { type: "range", hidden: true, value: props.value, min: props.min, max: props.max, step: props.step } )
-		]);
-
-		this.setAttribute( "tabindex", 0 );
-
-		this.setDOMEvents( {
-			pointerdown: ( ev ) => this._on_mousedown( ev ),
-			pointermove: ( ev ) => this._on_mousemove( ev ),
-			pointerup: ( ev ) => this._on_mouseup( ev ),
-			keydown: ( ev ) => this._on_key( ev ),
-		} );
-
-		this._range.addDOMEvent( "change", ( ev: Event) => {
-			//console.log( ev );
-		})
-	}
-
-	private _on_mousedown( ev: PointerEvent ) {
-		ev.stopPropagation( );
-		ev.preventDefault( );
-
-		this.focus( );
-
-		this._mdown = true;
-		this._irect = this.getBoundingRect( );
-
-		this.setCapture( ev.pointerId );
-	}
-
-	private _on_mousemove( ev: PointerEvent ) {
-		if( this._mdown ) {
-			let pos = ev.pageX - this._irect.left;
-			if( pos<0 ) {
-				pos = 0;
-			}
-			else if( pos>this._irect.width ) {
-				pos = this._irect.width;
-			}
-
-			let perc = pos / this._irect.width * 100;
-			this._range.setNumValue( perc );
-			
-			this._update( );
-		}
-	}
-
-	private _update( ) {
-		const value = this._range.getNumValue( );
-
-		const perc = value / (this.props.max-this.props.min) * 100;
-		this._thumb.setStyleValue( "left", perc+"%" );
-		this._bar.setStyleValue( "width", perc+"%" );
-		//thumb.setAttribute( "tooltip", value );
-
-		this.fire( "change", { value } );
-	}
-
-	private _on_mouseup( ev: PointerEvent ) {
-		if( this._mdown ) {
-			this.releaseCapture( ev.pointerId );
-			this._mdown = false;
-		}
-	}
-
-	private _on_key( ev: KeyboardEvent ) {
-		console.log( ev.key );
-
-		let stp = this.props.step ?? 1;
-		let inc = 0;
-		switch( ev.key ) {
-			case "ArrowRight":
-			case "ArrowUp": inc = stp; break;
-
-			case "ArrowLeft":
-			case "ArrowDown": inc = -stp; break;
-		}
-
-		if( inc ) {
-			if( ev.ctrlKey ) {
-				inc *= 10;
-			}
-
-			this._range.setNumValue( this._range.getNumValue()+inc );
-			this._update( );
-		}
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file slider.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.js';
+import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
+import { class_ns, Rect } from '../../core/core_tools.js';
+
+import { HBox } from '../boxes/boxes';
+import { Input } from '../input/input.js';
+
+import './slider.module.scss';
+
+interface SliderEvents extends ComponentEvents {
+	change: EvChange;
+}
+
+interface SliderProps extends ComponentProps {
+	value: number;
+	min: number;
+	max: number;
+	step?: number;
+	vertical?: boolean;
+	change?: EventCallback<EvChange>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Slider extends Component<SliderProps,SliderEvents> {
+
+	private _mdown = false;
+	private _irect: Rect = null;
+	private _thumb: Component = null;
+	private _bar: Component = null;
+	private _range: Input = null;
+
+
+	constructor( props: SliderProps ) {
+		super( props );
+
+		this.mapPropEvents( props, "change" );
+
+		if( props.vertical ) {
+			this.addClass( 'vertical' );
+		}
+
+		this.setContent( [
+			new HBox( { cls: "track", content: [
+				this._bar = new Component( { cls: "bar" } ),
+				this._thumb = new Component( { cls: "thumb" } ),
+			] }),
+			this._range = new Input( { 
+				type: "range", 
+				hidden: true, 
+				value: props.value, 
+				min: props.min, 
+				max: props.max, 
+				step: props.step,
+			} )
+		]);
+
+		this.setAttribute( "tabindex", 0 );
+
+		this.setDOMEvents( {
+			pointerdown: ( ev ) => this._on_mousedown( ev ),
+			pointermove: ( ev ) => this._on_mousemove( ev ),
+			pointerup: ( ev ) => this._on_mouseup( ev ),
+			keydown: ( ev ) => this._on_key( ev ),
+		} );
+
+		this._update( );
+	}
+
+	private _on_mousedown( ev: PointerEvent ) {
+		ev.stopPropagation( );
+		ev.preventDefault( );
+
+		this.focus( );
+
+		this._mdown = true;
+		this._irect = this.getBoundingRect( );
+
+		this.setCapture( ev.pointerId );
+	}
+
+	private _getMinMax( ) {
+		const min = parseInt( this._range.getAttribute( 'min' ) );
+		const max = parseInt( this._range.getAttribute( 'max' ) );
+		return [min,max];
+	}
+
+	private _on_mousemove( ev: PointerEvent ) {
+		if( this._mdown ) {
+
+			let pos: number;
+			let size: number;
+			
+			if( !this.props.vertical ) {
+				pos = ev.offsetX;	// - this._irect.left;
+				size = this._irect.width;
+			}
+			else {
+				pos  = ev.offsetY;	// - this._irect.top;
+				size = this._irect.height;
+			}
+		
+			let perc = pos / size;
+			if( this.props.vertical ) {
+				perc = 1-perc;
+			}
+
+			const [min,max] = this._getMinMax( );
+
+			this._range.setNumValue( min + (perc * (max-min) ) );
+			this._update( );
+		}
+	}
+
+	private _update( ) {
+		const value = this._range.getNumValue( );
+		const [min,max] = this._getMinMax( );
+
+		let perc = max>min ? value / Math.abs(max-min) * 100 : 0;
+
+		if( !this.props.vertical ) {
+			this._thumb.setStyleValue( "left", perc+"%" );
+			this._bar.setStyleValue( "width", perc+"%" );
+		}
+		else {
+			// 0 is at bottom
+			perc = 100-perc;
+			this._thumb.setStyleValue( "top", perc+"%" );
+			this._bar.setStyleValue( "height", perc+"%" );
+		}
+
+		this.fire( "change", { value } );
+	}
+
+	private _on_mouseup( ev: PointerEvent ) {
+		if( this._mdown ) {
+			this.releaseCapture( ev.pointerId );
+			this._mdown = false;
+		}
+	}
+
+	private _on_key( ev: KeyboardEvent ) {
+		console.log( ev.key );
+
+		let stp = this.props.step ?? 1;
+		let inc = 0;
+		switch( ev.key ) {
+			case "ArrowRight":
+			case "ArrowUp": inc = stp; break;
+
+			case "ArrowLeft":
+			case "ArrowDown": inc = -stp; break;
+		}
+
+		if( inc ) {
+			if( ev.ctrlKey ) {
+				inc *= 10;
+			}
+
+			this._range.setNumValue( this._range.getNumValue()+inc );
+			this._update( );
+		}
+	}
+
+	setMin( min: number ) {
+		this._range.setAttribute( 'min', min+'' );
+		this._update( );
+	}
+
+	setMax( max: number ) {
+		this._range.setAttribute( 'max', max+'' );
+		this._update( );
+	}
+
+	setValue( v: number ) {
+		this._range.setNumValue( v );
+		this._update( );
+	}
 }

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

@@ -1,127 +1,127 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file switch.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.
- **/
-
-@use "../shared.scss";
-
-:root {
-	--switch-border: var( --border );
-	--switch-background: #eee;
-	--switch-background-disabled: var( --disabled-background );
-	--switch-checked: var( --accent-background );
-}
-
-.x4switch {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	position: relative;
-    
-	gap: 4px;
-	margin-left: 5px;
-	padding: 4px;
-	cursor: pointer;
-
-	label {
-		cursor: pointer;
-	}
-
-	&:focus-within {
-		.x4label {
-			span {
-				text-decoration: underline;
-			}
-		}
-	}
-
-	.switch {
-		width: 2.2rem;
-		height: 18px;
-		position: relative;
-
-		input {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			appearance: none;
-			padding: 0;
-			margin: 0;
-			left: 0;
-			top: 0;
-			cursor: pointer;
-		}
-			
-		.track {
-			position: absolute;
-			pointer-events: none;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			border: 1px solid var( --switch-border );
-
-			background-color: var( --switch-background );
-			border-radius: 9px;
-
-			transition: background-color ease 0.2s;
-		}
-
-		.thumb {
-			position: absolute;
-			pointer-events: none;
-			left: 0.05rem;
-			top: 1px;
-
-			width: 1rem;
-			height: 1rem;
-
-			border-radius: 8px;
-			background-color: white;
-			box-shadow: 0 0 2px rgba(0,0,0,0.5);
-
-			transition: left ease 0.2s;
-		}
-	}
-
-	&:has(input:checked) {
-		.switch .thumb {
-			left: 1.15rem;
-		}
-		.switch .track {
-			background-color: var( --switch-checked );
-			//border-color: var( --color-70 );
-		}
-	}
-
-	&[disabled] {
-		&, * {
-			cursor: not-allowed;
-		}
-		
-		input {
-			pointer-events: none;
-		}
-
-		label {
-			pointer-events: none;
-			color: var( --checkbox-color-disabled );
-		}
-
-		.switch .track,
-		&.x4switch:has(input:checked) .switch .track {
-			background-color: var( --switch-background-disabled );
-		}
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file switch.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.
+ **/
+
+@use "../shared.scss";
+
+:root {
+	--switch-border: var( --border );
+	--switch-background: #eee;
+	--switch-background-disabled: var( --disabled-background );
+	--switch-checked: var( --accent-background );
+}
+
+.x4switch {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	position: relative;
+    
+	gap: 4px;
+	margin-left: 5px;
+	padding: 4px;
+	cursor: pointer;
+
+	label {
+		cursor: pointer;
+	}
+
+	&:focus-within {
+		.x4label {
+			span {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	.switch {
+		width: 2.2rem;
+		height: 18px;
+		position: relative;
+
+		input {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			appearance: none;
+			padding: 0;
+			margin: 0;
+			left: 0;
+			top: 0;
+			cursor: pointer;
+		}
+			
+		.track {
+			position: absolute;
+			pointer-events: none;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			border: 1px solid var( --switch-border );
+
+			background-color: var( --switch-background );
+			border-radius: 9px;
+
+			transition: background-color ease 0.2s;
+		}
+
+		.thumb {
+			position: absolute;
+			pointer-events: none;
+			left: 0.05rem;
+			top: 1px;
+
+			width: 1rem;
+			height: 1rem;
+
+			border-radius: 8px;
+			background-color: white;
+			box-shadow: 0 0 2px rgba(0,0,0,0.5);
+
+			transition: left ease 0.2s;
+		}
+	}
+
+	&:has(input:checked) {
+		.switch .thumb {
+			left: 1.15rem;
+		}
+		.switch .track {
+			background-color: var( --switch-checked );
+			//border-color: var( --color-70 );
+		}
+	}
+
+	&[disabled] {
+		&, * {
+			cursor: not-allowed;
+		}
+		
+		input {
+			pointer-events: none;
+		}
+
+		label {
+			pointer-events: none;
+			color: var( --checkbox-color-disabled );
+		}
+
+		.switch .track,
+		&.x4switch:has(input:checked) .switch .track {
+			background-color: var( --switch-background-disabled );
+		}
+	}
 }