x4js 2.0.5 → 2.0.7

package/src/components/treeview/treeview.module.scss

@@ -0,0 +1,116 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file treeview.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 {
+	--treeitem-backgound: var( );
+	--treeitem-color: var( );
+
+	--treeitem-backgound-hover: var( --background-secondary );
+	--treeitem-color-hover: var( );
+
+	--treeitem-background-sel: var( --accent-background );
+	--treeitem-color-sel: var( --accent-color );
+
+	--treeitem-backgound-active: var( --accent-background-active);
+	--treeitem-color-active: var( --accent-color-active );
+}
+
+.x4treeview {
+	overflow-y: auto;
+	height: 100%;
+	margin: 5px;
+
+	outline: none;
+	
+	border: 1px solid var( --border );
+
+	&:focus {
+		border: 1px solid var( --border-focus );
+	}
+
+	// child + subitems
+	.x4ctreeviewitem {
+		&>.label {
+			gap: 4px;
+
+			.x4label, .x4icon {
+				color: inherit;
+			}
+
+			.x4icon {
+				width: 16px;
+			}
+
+			padding: 4px;
+
+			&:hover {
+				background-color: var( --treeitem-backgound-hover );
+			}
+
+			&.selected {
+				background-color: var( --treeitem-background-sel );
+				color: var( --treeitem-color-sel );
+			}
+
+			&:active{
+				background-color: var( --accent-background-active );
+				color: var( --accent-color-active );
+			}	
+		}
+
+		&>.body:not(:first-child) {
+			padding-left: 24px;
+		}
+
+		&>.body {
+			transition: opacity 0.5s ease;
+		}
+
+		&.folder {
+			&> .label {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+
+				&>.x-icon {
+					transform: rotate( 0deg );
+					transition: transform 0.2s ease;
+
+					width: 16px;
+					height: 16px;
+
+					cursor: pointer;
+				}
+			}
+
+			&>.body {
+				overflow: hidden;
+			}
+		
+			&:not(.open) {
+				&>.body {
+					//display: none;
+					height: 0;
+					opacity: 0;
+				}
+
+				&>.label>.x4icon {
+					transform: rotate( -90deg );
+				}
+			}
+		}
+	}
+}

package/src/components/treeview/treeview.ts

@@ -0,0 +1,403 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file treeview.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, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM } from '@core/component';
+
+import { Label } from '../label/label';
+import { ListboxID, ListItem, kbNav } from '../listbox/listbox';
+import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
+import { Icon } from '../icon/icon.js';
+
+import "./treeview.module.scss";
+import folder_icon from "./chevron-down-light.svg"
+
+//import folder_closed from "./folder-minus-light.svg"
+
+export enum kbTreeNav {
+	first,
+	prev,
+	next,
+	last,
+	
+	parent,
+	child,
+
+	expand,
+	collapse,
+	toggle,
+}
+
+
+export interface TreeItem extends ListItem {
+	children?: TreeItem[];
+	open?: boolean;
+}
+
+interface TreeviewProps extends Omit<ComponentProps,"content"> {
+	items: TreeItem[];
+}
+
+interface ChangeEvent extends ComponentEvent {
+	selection: TreeItem;
+}
+
+interface TreeviewEvents extends ComponentEvents {
+	change: ChangeEvent;
+}
+
+class CTreeViewItem extends Box {
+
+	private _item: TreeItem;
+	private _label: Component;
+	private _icon: Icon;
+	private _childs: Component;
+
+	constructor( props: BoxProps, item: TreeItem ) {
+		super( { ...props } );
+
+		this._item = item;
+
+		if( item ) {
+			this._label = new HBox( {cls:"label item", content: [
+				this._icon = new Icon( { iconId: item.children? folder_icon : item.iconId } ),
+				new Label( { tag: "span", cls: "", text: item.text } ),
+			]});
+
+			this._label.setData( "id", item.id+"" );
+				
+			if( item.children ) {
+				this. _childs = new VBox( { cls: "body" } );
+
+				if( item.open===undefined ) {
+					item.open = false;
+				}
+
+				this.addClass( "folder" )
+				this.setClass( "open", item.open );
+				this.setItems( item.children );
+
+				this._icon.addDOMEvent( "click", ( ev )=>this.toggle(ev) );
+			}
+		}
+		else {
+			this. _childs = new VBox( { cls: "body" } );
+		}
+		
+		this.setContent( [
+			this._label,
+			this._childs,
+		] );
+	}
+
+	toggle( ev?: UIEvent ) {
+		
+		const isOpen = this.hasClass("open");
+		this.open( !isOpen );
+
+		if( ev ) {
+			ev.stopPropagation( );
+		}
+	}
+
+	open( open = true ) {
+		this.setClass( "open", open );
+		this._item.open = open;
+	}
+
+	setItems( items: TreeItem[ ] ) {
+		if( items ) {
+			const childs = items.map( itm => {
+				return new CTreeViewItem( {}, itm );
+			})
+			this._childs.setContent( childs );
+		}
+		else {
+			this._childs.clearContent( );
+		}
+	}
+}
+
+/**
+ * 
+ */
+
+export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+	private _selection: ListboxID;
+	private _selitem: Component;
+	private _items: TreeItem[];
+
+	constructor( props: TreeviewProps ) {
+		super( props );
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+
+		this.setAttribute( "tabindex", 0 );
+		this.setDOMEvents( {
+			click: ( ev ) => this._onclick( ev ),
+			keydown: ( ev ) => this._onkey( ev ),
+		});
+	}
+
+	/**
+	 * 
+	 */
+
+	setItems( items: TreeItem[ ] ) {
+		this._items = items;
+
+		const root = new CTreeViewItem( { cls: "root"}, null );
+		root.setItems( items );
+		this.setContent( root );
+	}
+
+	private _onclick( ev: UIEvent ) {
+		let target = ev.target as HTMLElement;
+		while( target && target!=this.dom ) {
+			const c = componentFromDOM( target );
+			
+			if( c && c.hasClass("item") ) {
+				const id = c.getData( "id" );
+				this._selectItem( id, c );
+				return;
+			}
+
+			target = target.parentElement;
+		}
+
+		this.clearSelection( );
+	}
+
+	private _onkey( ev: KeyboardEvent ) {
+		switch( ev.key ) {
+			case "ArrowDown": {
+				this.navigate( kbTreeNav.next );
+				break;
+			}
+
+			case "ArrowUp": {
+				this.navigate( kbTreeNav.prev );
+				break;
+			}
+
+			case "Home": {
+				this.navigate( kbTreeNav.first );
+				break;
+			}
+
+			case "End": {
+				this.navigate( kbTreeNav.last );
+				break;
+			}
+
+			case "ArrowRight":{
+				this.navigate( kbTreeNav.child );
+				break;
+			}
+
+			case "+": {
+				this.navigate( kbTreeNav.expand );
+				break;
+			}
+
+			case "ArrowLeft": {
+				this.navigate( kbTreeNav.parent );
+				break;
+			}
+			
+			case "-": {
+				this.navigate( kbTreeNav.collapse );
+				break;
+			}
+
+			
+			case ' ': {
+				this.navigate( kbTreeNav.toggle );
+				break;
+			}
+
+			default:
+				console.log( ev.key );
+				return;
+		}
+
+		ev.preventDefault( );
+		ev.stopPropagation( );
+	}
+
+	/**
+	 * 
+	 */
+
+	navigate( sens: kbTreeNav ) {
+
+		if( !this._items || this._items.length==0 ) {
+			return;
+		}
+		
+		if( !this._selitem ) {
+			if( sens==kbTreeNav.next || sens==kbTreeNav.parent ) sens = kbTreeNav.first;
+			else if( sens==kbTreeNav.prev ) sens = kbTreeNav.last;
+			else return;
+		}
+
+		const p = this._selitem?.parentElement<CTreeViewItem>( );
+		const isFolder = p?.hasClass("folder");
+
+		if( p && sens==kbTreeNav.parent && isFolder && p.hasClass("open") ) {
+			sens = kbTreeNav.collapse;
+		}
+		else if( sens==kbTreeNav.child ) {
+			if( isFolder) {
+				if( !p.hasClass("open") ) {
+					sens = kbTreeNav.expand;
+				}
+				else {
+					sens = kbTreeNav.next;
+				}
+			}
+			else {
+				sens = kbTreeNav.next;
+			}
+		}
+
+		if( sens==kbTreeNav.expand || sens==kbTreeNav.collapse || sens==kbTreeNav.toggle ) {
+			if( isFolder ) {
+				if( sens==kbTreeNav.toggle ) {
+					p.toggle( );
+					return true;
+				}
+				else {
+					p.open( sens==kbTreeNav.expand );
+					return true;
+				}
+			}
+		}
+		else {
+			const all = this._flattenOpenItems( );
+			let cur = all.findIndex( x => this._selection==x.id );
+
+			let newSel: ListboxID;
+			
+			if( sens==kbTreeNav.first ) {
+				newSel = all[0].id;
+			} 
+			else if( sens==kbTreeNav.last ) {
+				newSel = all[all.length-1].id;
+			}
+			else if( cur>=0 ) {
+				if( sens==kbTreeNav.prev ) {
+					if( cur>0 ) {
+						newSel = all[cur-1].id;
+					}
+				}
+				else if( sens==kbTreeNav.next ) {
+					if( cur<all.length-1 ) {
+						newSel = all[cur+1].id;
+					}
+				}
+				else if( sens==kbTreeNav.parent ) {
+
+					const clevel = all[cur].level;
+					while( cur>0 ) {
+						cur--;
+						if( all[cur].level<clevel ) {
+							newSel = all[cur].id;
+							break;
+						}
+					}
+				}
+			}
+
+			if( newSel ) {
+				const nsel = this.query( `[data-id="${newSel}"]`)
+				this._selectItem( newSel, nsel );
+				return true;
+			}
+		}
+		
+		return false;
+	}
+
+	private _flattenOpenItems( ) {
+		let all: { id: ListboxID, level: number }[] = [];
+		
+		const build = ( x: TreeItem, level: number ) => {
+			all.push( {id: x.id+"", level } );
+			if( x.children && x.open ) {
+				x.children.forEach( y => build( y, level+1 ) );
+			}
+		}
+
+		this._items.forEach( y => build( y, 0 ) );
+		return all;
+	}
+
+	private _flattenItems( ) {
+		let all: TreeItem[] = [];
+		
+		const build = ( x: TreeItem ) => {
+			all.push( x );
+			if( x.children ) {
+				x.children.forEach( y => build(y) );
+			}
+		}
+
+		this._items.forEach( y => build( y ) );
+		return all;
+	}
+
+	private _selectItem( id: ListboxID, item: Component ) {
+		if( this._selitem ) {
+			this._selitem.removeClass( "selected" );
+			this._selitem = undefined;
+		}
+
+		this._selitem = item;
+		this._selection = id;
+
+		if( item ) {
+			item.addClass( "selected" );
+			item.scrollIntoView( {
+				behavior: "smooth",
+				block: "nearest"
+			} );
+		}
+
+		const itm = this._findItem( id );
+		this.fire( "change", { selection: itm } );
+	}
+
+	private _findItem( id: ListboxID ) {
+		const all = this._flattenItems( );
+		return all.find( x => x.id==id );
+	}
+
+	/**
+	 * 
+	 */
+	
+	clearSelection( ) {
+		if( this._selitem ) {
+			this._selitem.removeClass( "selected" );
+			this._selitem = undefined;
+		}
+
+		this._selection = undefined;
+		this.fire( "change", { selection: undefined } );
+	}
+}

package/src/components/viewport/viewport.module.scss

@@ -0,0 +1,25 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file viewport.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";
+
+.x4scrollview {
+	@extend .flex;
+}
+
+.x4viewport {
+	width: 100%;
+}

package/src/components/viewport/viewport.ts

@@ -0,0 +1,38 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file viewport.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, ComponentProps } from "@core/component"
+
+import "./viewport.module.scss"
+
+export class Viewport extends Component {
+	constructor( props: ComponentProps ) {
+		super( props );
+	}
+}
+
+export class ScrollView extends Component {
+	constructor( props: ComponentProps ) {
+		super( props );
+		this.setContent( new Viewport( {} ) );
+	}
+
+	getViewport( ) {
+		return this.firstChild<Viewport>( );
+	}
+}
+
+