x4js 1.5.15 → 1.5.17

package/lib/src/svgcomponent.ts

@@ -1,577 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file svgcomponent.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2022 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-import { Component, CProps, _x4_unitless } from './component'
-import { isNumber, isString } from "./tools"
-
-const reNumber = /^-?\d+(\.\d+)?$/;
-
-// degrees to radian
-function d2r( d: number ): number {
-	return d * Math.PI / 180.0;
-}
-
-// polar to cartesian
-function p2c( x: number, y: number, r: number, deg: number ): {x: number,y: number} {
-	const rad = d2r( deg );
-	return {
-		x: x + r * Math.cos( rad ),
-		y: y + r * Math.sin( rad )
-	};
-}
-
-function num( x: number ): number {
-	return Math.round( x * 1000 ) / 1000;
-}
-
-function clean( a, ...b ) {
-
-	// just round number values to 3 digits
-	b = b.map( v => {
-		if( typeof v === 'number' && isFinite(v) ) {
-			return num(v);
-		}
-
-		return v;
-	});
-
-	return String.raw( a, ...b );
-}
-
-/**
- * 
- */
-
-abstract class SVGItem {
-	private m_tag: string
-	private m_attrs: Map<string,string>;
-	private m_style: Map<string,string>;
-
-	constructor( tag: string ) {
-		this.m_tag = tag;
-		this.m_attrs = new Map( );
-		this.m_style = new Map( );
-	}
-
-	/**
-	 * render the item
-	 * @returns 
-	 */
-	render( ) : string {
-		return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent( )}</${this.m_tag}>`;
-	}
-
-	/**
-	 * change the stroke color
-	 * @param color 
-	 */
-
-	stroke( color: string, width?: number ): this {
-		this.attr( 'stroke', color );
-		if( width!==undefined ) {
-			this.attr( 'stroke-width', width+'px' );	
-		}
-		return this;
-	}
-
-	/**
-	 * change the stroke width
-	 * @param width 
-	 */
-	strokeWidth( width: number ): this {
-		this.attr( 'stroke-width', width+'px' );
-		return this;
-	}
-
-	/**
-	 * change the fill color
-	 * @param color 
-	 */
-
-	fill( color: string ): this {
-		this.attr( 'fill', color );
-		return this;
-	}
-
-	/**
-	 * define a new attribute
-	 * @param name attibute name
-	 * @param value attribute value
-	 * @returns this
-	 */
-
-	attr( name: string, value: string ) : this {
-		this.m_attrs.set( name, value );
-		return this;
-	}
-
-	style( name: string, value: string | number ) : this {
-		
-		if (value === undefined || value==='' || value===undefined ) {
-			this.m_style.delete( name );
-			return;
-		}
-		
-		if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
-			value = value + 'px';
-		}
-
-		this.m_style.set( name, ''+value );
-		return this;
-	}
-
-	/**
-	 * add a class
-	 * @param name class name to add 
-	 */
-	
-	class( name: string ): this {
-		let c = this.m_attrs.get( 'class' );
-		this.m_attrs.set( 'class', (c??'' + ' ' + name).trim() );
-		return this;
-	}
-	
-	/**
-	 * 
-	 */
-	
-	renderAttrs( ): string {
-		if( !this.m_attrs.size ) {
-			return "";
-		}
-
-		let result = '';
-		this.m_attrs.forEach( (v,k) => {
-			result += ` ${k} = "${v}"`
-		});
-
-		return result;
-	}
-
-	/**
-	 * 
-	 */
-	
-	 renderStyle( ): string {
-
-		if( !this.m_style.size ) {
-			return "";
-		}
-
-		let result = 'style="';
-		this.m_style.forEach( (v,k) => {
-			result += `${k}:${v};`
-		});
-
-		return result+'"';
-	}
-	
-	/**
-	 * 
-	 */
-
-	renderContent( ): string {
-		return '';
-	}
-
-	/**
-	 * 
-	 */
-
-	clip( id: string ) {
-		this.attr( "clip-path", `url(#${id})` );
-		return this;
-	}
-
-	/**
-	 * 
-	 */
-
-	transform( tr: string ) {
-		this.attr( "transform", tr );
-	}
-
-	/**
-	 * 
-	 */
-
-	rotate( deg: number, cx: number, cy: number ) {
-		this.transform( `rotate( ${deg} ${cx} ${cy} )` );
-	}
-
-	translate( dx: number, dy: number ) {
-		this.transform( `translate( ${dx} ${dy} )` );
-	}
-
-	scale( x: number ) {
-		this.transform( `scale( ${x} )` );
-	}
-}
-
-/**
- * 
- */
-
-class SVGPath extends SVGItem {
-	private m_path: string;
-
-	constructor( ) {
-		super( 'path' );
-		this.m_path = '';
-	}
-
-	override renderAttrs(): string {
-		this.attr( 'd', this.m_path );
-		return super.renderAttrs( );
-	}
-
-	/**
-	 * move the current pos
-	 * @param x new pos x
-	 * @param y new pos y
-	 * @returns this
-	 */
-
-	moveTo( x: number, y: number ) : this {
-		this.m_path += clean`M${x},${y}`;
-		return this;
-	}
-
-	/**
-	 * draw aline to the given point
-	 * @param x end x
-	 * @param y end y
-	 * @returns this
-	 */
-
-	lineTo( x: number, y: number ): this {
-		this.m_path += clean`L${x},${y}`;
-		return this;
-	}
-
-	/**
-	 * close the currentPath
-	 */
-
-	closePath( ): this {
-		this.m_path += 'Z';
-		return this;
-	}
-
-	/**
-	 * draw an arc
-	 * @param x center x
-	 * @param y center y
-	 * @param r radius
-	 * @param start angle start in degrees
-	 * @param end angle end in degrees
-	 * @returns this
-	 */
-
-	arc( x: number, y: number, r: number, start: number, end: number ): this {
-
-		const st = p2c( x, y, r, start-90 );
-		const en = p2c( x, y, r, end-90 );
-
-		const flag = end - start <= 180 ? "0" : "1";
-		this.m_path += clean`M${st.x},${st.y}A${r},${r} 0 ${flag} 1 ${en.x},${en.y}`;
-		
-		return this;
-	}
-}
-
-/**
- * 
- */
-
-class SVGText extends SVGItem {
-
-	private m_text;
-
-	constructor( x: number, y: number, txt: string ) {
-		super( 'text' );
-		this.m_text = txt;
-		this.attr( 'x', num(x)+'' );
-		this.attr( 'y', num(y)+'' );
-	}
-
-	font( font: string ): this {
-		this.attr( 'font-family', font );
-		return this;
-	}
-
-	fontSize( size: number | string ): this {
-		this.attr( 'font-size', size+'' );
-		return this;
-	}
-
-	fontWeight( weight: 'light' | 'normal' | 'bold' ): this {
-		this.attr( 'font-weight', weight );
-		return this;
-	}
-
-	textAlign( align: 'left' | 'center' | 'right' ): this {
-
-		let al;
-		switch( align ) {
-			case 'left': al = 'start'; break;
-			case 'center': al = 'middle'; break;
-			case 'right': al = 'end'; break;
-			default: return this;
-		}
-
-		this.attr( 'text-anchor', al );
-		return this;
-	}
-
-	verticalAlign( align: 'top' | 'center' | 'bottom' ): this {
-
-		let al;
-		switch( align ) {
-			case 'top': al = 'hanging'; break;
-			case 'center': al = 'middle'; break;
-			case 'bottom': al = 'baseline'; break;
-			default: return;
-		}
-
-		this.attr( 'alignment-baseline', al );
-		return this;
-	}
-
-	override renderContent( ) {
-		return this.m_text;
-	}
-}
-
-/**
- * 
- */
-
-class SVGShape extends SVGItem {
-	constructor( tag: string ) {
-		super( tag );
-	}
-}
-
-/**
- * 
- */
-
-type number_or_perc = number | `${string}%`
-
-class SVGGradient extends SVGItem {
-
-	private static g_id = 1;
-
-	private m_id: string;
-	private m_stops: { offset: number_or_perc, color: string } [];
-
-	constructor( x1: number_or_perc, y1: number_or_perc, x2: number_or_perc, y2: number_or_perc ) {
-		super( 'linearGradient')
-		
-		this.m_id = 'gx-'+SVGGradient.g_id;
-		this.attr( 'id', this.m_id );
-		this.attr( 'x1', isString(x1) ? x1 : num(x1)+'' );
-		this.attr( 'x2', isString(x2) ? x2 : num(x2)+'' );
-		this.attr( 'y1', isString(y1) ? y1 : num(y1)+'' );
-		this.attr( 'y2', isString(y2) ? y2 : num(y2)+'' );
-
-		this.m_stops = [];
-		SVGGradient.g_id++;
-	}
-
-	get id( ) {
-		return 'url(#'+this.m_id+')';
-	}
-
-	addStop( offset: number_or_perc, color: string ): this {
-		this.m_stops.push( {offset,color} );
-		return this;
-	}
-
-	override renderContent(): string {
-
-		const result = [];
-		this.m_stops.forEach( s => {
-			result.push( `<stop offset="${s.offset}%" stop-color="${s.color}"></stop>`);
-		});
-
-		return result.join('\n' );
-	}
-}
-
-/**
- * 
- */
-
-class SVGGroup extends SVGItem {
-	protected m_items: SVGItem[];
-
-	constructor( tag = "g" ) {
-		super( tag )
-
-        this.m_items = [];
-	}
-
-	path( ) {
-		const path = new SVGPath( );
-		this.m_items.push( path );
-		return path;
-	}
-
-	text( x, y, txt ) {
-		const text = new SVGText( x, y, txt );
-		this.m_items.push( text );
-		return text;
-	}
-
-	ellipse( x, y, r1, r2 = r1 ) {
-		const shape = new SVGShape( 'ellipse' );
-		shape.attr( 'cx', num(x)+'' );
-		shape.attr( 'cy', num(y)+'' );
-		shape.attr( 'rx', num(r1)+'' );
-		shape.attr( 'ry', num(r2)+'' );
-		this.m_items.push( shape );
-		return shape;
-	}
-
-	rect( x, y, w, h ) {
-		const shape = new SVGShape( 'rect' );
-		shape.attr( 'x', num(x)+'' );
-		shape.attr( 'y', num(y)+'' );
-		shape.attr( 'width', num(w)+'' );
-		shape.attr( 'height', num(h)+'' );
-		this.m_items.push( shape );
-		return shape;
-	}
-
-	/**
-	 * 
-	 * example
-	 * ```ts
-	 * const g = c.linear_gradient( '0%', '0%', '0%', '100%' )
-	 * 				.addStop( 0, 'red' )
-	 * 				.addStop( 100, 'green' );
-	 * 
-	 * p.rect( 0, 0, 100, 100 )
-	 * 		.stroke( g.id );
-	 * 
-	 * ```
-	 */
-
-	linear_gradient( x1: number_or_perc, y1: number_or_perc, x2: number_or_perc, y2: number_or_perc ) {
-		const grad = new SVGGradient( x1, y1, x2, y2 );
-		this.m_items.push( grad );
-		return grad;
-	}
-
-	/**
-	 * clear 
-	 */
-
-	clear( ) {
-		this.m_items = [];
-	}
-
-	renderContent( ) {
-		let result: string[] = [];
-		this.m_items.forEach( i => {
-			result.push( i.render() );
-		});
-
-		return result.join( '\n' );
-	}
-}
-
-
-/**
- * 
- */
-
-export class SVGPathBuilder extends SVGGroup
-{
-	private static g_clip_id = 1;
-	
-	constructor( ) {
-		super( '' );
-	}
-
-	addClip( x: number, y: number, w: number, h: number ) {
-        
-		const id = 'c-'+SVGPathBuilder.g_clip_id++;
-		const clip = new SVGGroup( 'clipPath' );
-		clip.attr('id', id );
-		clip.rect( x, y, w, h );
-
-		this.m_items.push(clip);
-        return id;
-    }
-    
-    render() {
-
-		let result = [];
-        this.m_items.forEach(i => {
-            result.push(i.render());
-        });
-
-		return result.join('\n');
-     }
-}
-
-/**
- * 
- */
-
-
-export interface SVGProps extends CProps {
-	viewBox?: string;
-	path?: string;
-}
-
-
-export class SVGComponent<P extends SVGProps = SVGProps> extends Component<P> {
-
-	constructor( props: P ) {
-		super( props );
-
-		this.setTag('svg','http://www.w3.org/2000/svg');
-		this.setAttribute('xmlns','http://www.w3.org/2000/svg');
-
-		this.setAttributes( {
-			viewBox: props.viewBox,
-		});
-
-		this.setContent( props.path );
-	}
-
-	
-}
-
-
-

package/lib/src/tabbar.ts

@@ -1,151 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file tabbar.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2022 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-import { Component, Container, ContainerEventMap, CProps, EventHandler } from './component';
-import { Button } from './button';
-import { EvChange } from './x4events';
-import { IconID } from './icon.js';
-
-interface TabBarEventMap extends ContainerEventMap {
-	change: EvChange;
-}
-
-interface TabBarProps extends CProps<TabBarEventMap> {
-	pages?: ITabPage[];
-	default?: string;
-	vertical?: boolean;
-	change: EventHandler<EvChange>;
-}
-
-export interface ITabPage {
-	id: string;
-	title?: string;
-	icon?: IconID;
-	page: Component;
-}
-
-interface TabPage extends ITabPage {
-	btn?: Component;
-}
-
-export class TabBar extends Container<TabBarProps,TabBarEventMap> {
-
-	private m_pages: TabPage[];
-	private m_curPage: TabPage;
-
-	constructor( props: TabBarProps ) {
-		super( props );
-
-		this.m_pages = [];
-		this.m_curPage = null;
-
-		this.mapPropEvents( props, 'change' );
-
-		if( props.vertical ) {
-			this.addClass( '@vlayout')
-		}
-		else {
-			this.addClass( '@hlayout')
-		}
-
-		this.m_props.pages?.forEach( p => this.addPage(p) );
-	}
-
-	componentCreated(): void {
-		if( this.m_props.default ) {
-			this.select( this.m_props.default, true );
-		}		
-	}
-
-	addPage( page: ITabPage ) {
-		this.m_pages.push( { ...page } );
-		this._updateContent( );
-	}
-
-	render( ) {
-		let buttons = [];
-		this.m_pages.forEach( p => {
-			p.btn = new Button( { cls: p===this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p,true) } );
-			buttons.push( p.btn );
-		});
-
-		this.setContent( buttons );
-	}
-
-	select( id: string | null, notify = false ): boolean {
-		if( !id ) {
-			this._select( null, notify );
-			return true;
-		}
-		else {
-			let page = this.m_pages.find( x => x.id===id );
-			if( page ) {
-				this._select( page, notify );
-				return true;
-			}
-			return false;
-		}
-	}
-
-	private _select( p: TabPage, notify: boolean ) {
-
-		if( this.m_curPage==p ) {
-			return;
-		}
-
-		if( !this.dom ) {
-			this.m_props.default = p.id;
-			return;
-		}
-
-		if( this.m_curPage ) {
-			this.m_curPage.btn.removeClass( 'selected' );
-			if( this.m_curPage.page ) {
-				this.m_curPage.page.hide( );
-			}
-		}
-
-		this.m_curPage = p;
-
-		if( notify ) {
-			this.signal( 'change', EvChange(p ? p.id : null) );
-		}
-
-		if( this.m_curPage ) {
-			this.m_curPage.btn.addClass( 'selected' );
-			if( this.m_curPage.page ) {
-				this.m_curPage.page.show( );
-			}
-		}
-	}
-
-	get selection( ): Component {
-		return this.m_curPage?.page;
-	}
-}