x4js 1.5.16 → 1.5.18

package/lib/src/canvas.ts

@@ -1,505 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @file canvas.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, CEventMap, html } from './component'
-import { BasicEvent, EventCallback } from './x4events'
-
-interface EvPaint extends BasicEvent {
-	ctx: CanvasPainter;
-}
-
-function EvPaint(ctx: CanvasPainter) {
-	return BasicEvent<EvPaint>({ ctx });
-}
-
-interface CanvasEventMap extends CEventMap {
-	paint: EvPaint;
-}
-
-interface CanvasProps extends CProps<CanvasEventMap> {
-	autoClear?: boolean;
-	painter?: PaintHandler;
-	paint: EventCallback<EvPaint>
-}
-
-
-// ============================================================================
-// [CANVAS]
-// ============================================================================
-
-
-
-
-export interface CanvasPainter extends CanvasRenderingContext2D {
-	width: number;
-	height: number;
-
-	smoothLine(points: any[], path: CanvasPath, move: boolean): void;
-	smoothLineEx(_points: any[], tension: number, numOfSeg: number, path: CanvasPath, move?: boolean, close?: boolean): void;
-	line(x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number): void;
-	roundRect(x: number, y: number, width: number, height: number, radius: number): void;
-	calcTextSize(text: string, rounded: boolean): { width: number, height: number };
-	setFontSize(fs: number): void;
-	circle(x: number, y: number, radius: number): void;
-}
-
-function mkPainter(c2d: CanvasRenderingContext2D, w: number, h: number): CanvasPainter {
-
-	let cp = c2d as CanvasPainter;
-
-	cp.width = w;
-	cp.height = h;
-
-	cp.smoothLine = smoothLine;
-	cp.smoothLineEx = smoothLineEx;
-	cp.line = line;
-	cp.roundRect = roundRect;
-	cp.calcTextSize = calcTextSize;
-	cp.setFontSize = setFontSize;
-	cp.circle = circle;
-
-	return cp;
-}
-
-function smoothLine( this: CanvasRenderingContext2D, points: any[], path: CanvasPath = null, move = true) {
-	if (points.length < 2) {
-		return;
-	}
-
-	if (!path) {
-		path = this;
-	}
-
-	if (points.length == 2) {
-		if (move !== false) {
-			path.moveTo(points[0].x, points[0].y);
-		}
-		else {
-			path.lineTo(points[0].x, points[0].y);
-		}
-
-		path.lineTo(points[1].x, points[1].y);
-		return;
-	}
-
-	function midPointBtw(p1, p2) {
-		return {
-			x: p1.x + (p2.x - p1.x) / 2,
-			y: p1.y + (p2.y - p1.y) / 2
-		};
-	}
-
-	function getQuadraticXY(t, sx, sy, cp1x, cp1y, ex, ey) {
-		return {
-			x: (1 - t) * (1 - t) * sx + 2 * (1 - t) * t * cp1x + t * t * ex,
-			y: (1 - t) * (1 - t) * sy + 2 * (1 - t) * t * cp1y + t * t * ey
-		};
-	}
-
-	let p1 = points[0],
-		p2 = points[1],
-		p3 = p1;
-
-	path.moveTo(p1.x, p1.y);
-
-	for (let i = 1, len = points.length; i < len; i++) {
-		// we pick the point between pi+1 & pi+2 as the
-		// end point and p1 as our control point
-		let midPoint = midPointBtw(p1, p2);
-		//this.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
-		for (let i = 0; i < 8; i++) {
-			let { x, y } = getQuadraticXY(i / 8, p3.x, p3.y, p1.x, p1.y, midPoint.x, midPoint.y);
-			path.lineTo(x, y);
-		}
-
-		p1 = points[i];
-		p2 = points[i + 1];
-		p3 = midPoint;
-	}
-
-	// Draw last line as a straight line while
-	// we wait for the next point to be able to calculate
-	// the bezier control point
-
-	path.lineTo(p1.x, p1.y);
-}
-
-function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: number = 0.5, numOfSeg: number = 10, path: CanvasPath = null, move = true, close = false) {
-
-	let points = [];
-
-	//pts = points.slice(0);
-	for (let p = 0, pc = _points.length; p < pc; p++) {
-		points.push(_points[p].x);
-		points.push(_points[p].y);
-	}
-
-	let pts,
-		i = 1,
-		l = points.length,
-		rPos = 0,
-		rLen = (l - 2) * numOfSeg + 2 + (close ? 2 * numOfSeg : 0),
-		res = new Float32Array(rLen),
-		cache = new Float32Array((numOfSeg + 2) * 4),
-		cachePtr = 4;
-
-	pts = points.slice(0);
-
-	if (close) {
-		pts.unshift(points[l - 1]);				// insert end point as first point
-		pts.unshift(points[l - 2]);
-		pts.push(points[0], points[1]); 		// first point as last point
-	}
-	else {
-		pts.unshift(points[1]);					// copy 1. point and insert at beginning
-		pts.unshift(points[0]);
-		pts.push(points[l - 2], points[l - 1]);	// duplicate end-points
-	}
-
-	// cache inner-loop calculations as they are based on t alone
-	cache[0] = 1;								// 1,0,0,0
-
-	for (; i < numOfSeg; i++) {
-
-		var st = i / numOfSeg,
-			st2 = st * st,
-			st3 = st2 * st,
-			st23 = st3 * 2,
-			st32 = st2 * 3;
-
-		cache[cachePtr++] = st23 - st32 + 1;	// c1
-		cache[cachePtr++] = st32 - st23;		// c2
-		cache[cachePtr++] = st3 - 2 * st2 + st;	// c3
-		cache[cachePtr++] = st3 - st2;			// c4
-	}
-
-	cache[cachePtr] = 1;						// 0,1,0,0
-
-	// calc. points
-	parse(pts, cache, l);
-
-	if (close) {
-		//l = points.length;
-		pts = [];
-		pts.push(points[l - 4], points[l - 3], points[l - 2], points[l - 1]); // second last and last
-		pts.push(points[0], points[1], points[2], points[3]); // first and second
-		parse(pts, cache, 4);
-	}
-
-	function parse(pts, cache, l) {
-
-		for (var i = 2, t; i < l; i += 2) {
-
-			var pt1 = pts[i],
-				pt2 = pts[i + 1],
-				pt3 = pts[i + 2],
-				pt4 = pts[i + 3],
-
-				t1x = (pt3 - pts[i - 2]) * tension,
-				t1y = (pt4 - pts[i - 1]) * tension,
-				t2x = (pts[i + 4] - pt1) * tension,
-				t2y = (pts[i + 5] - pt2) * tension;
-
-			for (t = 0; t < numOfSeg; t++) {
-
-				var c = t << 2, //t * 4;
-
-					c1 = cache[c],
-					c2 = cache[c + 1],
-					c3 = cache[c + 2],
-					c4 = cache[c + 3];
-
-				res[rPos++] = c1 * pt1 + c2 * pt3 + c3 * t1x + c4 * t2x;
-				res[rPos++] = c1 * pt2 + c2 * pt4 + c3 * t1y + c4 * t2y;
-			}
-		}
-	}
-
-	// add last point
-	l = close ? 0 : points.length - 2;
-	res[rPos++] = points[l];
-	res[rPos] = points[l + 1];
-
-	if (!path) {
-		path = this;
-	}
-
-	// add lines to path
-	for (let i = 0, l = res.length; i < l; i += 2) {
-		if (i == 0 && move !== false) {
-			path.moveTo(res[i], res[i + 1]);
-		}
-		else {
-			path.lineTo(res[i], res[i + 1]);
-		}
-	}
-}
-
-function line(this: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number = 1) {
-	this.save();
-	this.beginPath();
-	this.moveTo(x1, y1);
-	this.lineTo(x2, y2);
-	this.lineWidth = lineWidth;
-	this.strokeStyle = color;
-	this.stroke();
-	this.restore();
-}
-
-function roundRect(this: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
-	//this.beginPath( );
-	this.moveTo(x + radius, y);
-	this.lineTo(x + width - radius, y);
-	this.quadraticCurveTo(x + width, y, x + width, y + radius);
-	this.lineTo(x + width, y + height - radius);
-	this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-	this.lineTo(x + radius, y + height);
-	this.quadraticCurveTo(x, y + height, x, y + height - radius);
-	this.lineTo(x, y + radius);
-	this.quadraticCurveTo(x, y, x + radius, y);
-	this.closePath();
-}
-
-function calcTextSize( this: CanvasRenderingContext2D, text: string, rounded = false): { width: number, height: number } {
-
-	let fh = this.measureText(text);
-	let lh = fh.fontBoundingBoxAscent + fh.fontBoundingBoxDescent;
-
-	if (rounded) {
-		return { width: Math.round(fh.width), height: Math.round(lh) };
-	}
-	else {
-		return { width: fh.width, height: lh };
-	}
-}
-
-function setFontSize( this: CanvasRenderingContext2D, fs: number) {
-	let fsize = Math.round(fs) + 'px';
-	this.font = this.font.replace(/\d+px/, fsize);
-}
-
-function circle( this: CanvasRenderingContext2D, x: number, y: number, radius: number) {
-	this.moveTo(x + radius, y);
-	this.arc(x, y, radius, 0, Math.PI * 2);
-}
-
-type PaintHandler = (ctx: CanvasPainter) => any;
-
-/**
- * 
- */
-
-//export class CanvasProps extends CProps
-//{
-// low level handlers
-//mousedown?:  (ev: MouseEvent) => any;
-//mousemove?:  (ev: MouseEvent) => any;
-//mouseup?:  (ev: MouseEvent) => any;
-//mouseleave?:  (ev: MouseEvent) => any;
-//mousewheel?: (ev: WheelEvent) => any;
-//click?: (ev: MouseEvent) => any;
-//dblclick?: (ev: MouseEvent) => any;
-//touchstart?: (ev: TouchEvent) => any;
-//touchmove?: (ev: TouchEvent) => any;
-//touchend?: (ev: TouchEvent) => any;
-//keydown?: (ev: KeyboardEvent) => any;
-//keyup?: (ev: KeyboardEvent) => any;
-//}
-
-
-/**
- * Standard Canvas
- */
-
-export class Canvas extends Component<CanvasProps, CanvasEventMap> {
-
-	private m_iwidth: number = -1;
-	private m_iheight: number = -1;
-	private m_scale = 1.0;
-	private m_canvas: Component;
-
-	constructor(props: CanvasProps) {
-		super(props);
-
-		//if( props.mousedown )	{ this.setDomEvent( 'mousedown', props.mousedown ); }
-		//if( props.mousemove )	{ this.setDomEvent( 'mousemove', props.mousemove ); }
-		//if( props.mouseup )		{ this.setDomEvent( 'mouseup', props.mouseup ); }
-		//if( props.mousewheel )	{ this.setDomEvent( 'wheel', props.mousewheel ); }
-		//if( props.mouseleave )	{ this.setDomEvent( 'mouseleave', props.mouseleave ); }
-		//if( props.click )		{ this.setDomEvent( 'click', props.click ); }
-		//if( props.dblclick )	{ this.setDomEvent( 'dblclick', props.dblclick ); }
-		//if( props.touchstart )	{ this.setDomEvent( 'touchstart', props.touchstart ); }
-		//if( props.touchmove )	{ this.setDomEvent( 'touchmove', props.touchmove ); }
-		//if( props.touchend )	{ this.setDomEvent( 'touchend', props.touchend ); }
-		//if( props.keydown )		{ this.setDomEvent( 'keydown', props.keydown ); this.setAttribute( 'tabindex', 0 ); }
-		//if( props.keyup )		{ this.setDomEvent( 'keyup', props.keyup ); this.setAttribute( 'tabindex', 0 ); }
-		//if( props.paint ) 		{ this.onPaint( props.paint ); }
-
-		this.setDomEvent('sizechange', () => { this._paint(); })
-		this.mapPropEvents( props, 'paint' );
-	}
-
-	/** @ignore */
-	render() {
-		this.m_iwidth = -1;
-		this.m_iheight = -1;
-		this.m_canvas = new Component({
-			tag: 'canvas'
-		});
-
-		this.setContent( this.m_canvas );
-//		this.redraw(10);
-	}
-
-	update(delay=0 ) {
-		this.m_iheight = this.m_iwidth = -1;
-		super.update( delay );
-	}
-
-	/**
-	 * scale the whole canvas
-	 */
-
-	scale(scale: number) {
-		this.m_scale = scale;
-		this.m_iwidth = -1;	// force recalc
-		this.redraw();
-	}
-
-	/**
-	 * return the internal canvas
-	 */
-	get canvas(): Component {
-		return this.m_canvas;
-	}
-
-	/**
-	 * redraw the canvas (force a paint)
-	 */
-
-	private $update_rep = 0;
-	public redraw(wait?: number) {
-
-		if (wait !== undefined) {
-
-			if( ++this.$update_rep>=20 ) {
-				this.stopTimer( 'update' );
-				this._paint( );
-			}
-			else {
-				this.startTimer( 'update', wait, false, () => this._paint() );
-			}
-		}
-		else {
-			this.stopTimer( 'update' );
-			this._paint();
-		}
-	}
-
-	/**
-	 * 
-	 */
-	private _paint() {
-		this.$update_rep = 0;
-
-		let dom = this.dom;
-		if (!this.isUserVisible() ) {
-			return;
-		}
-
-		let canvas = this.m_canvas.dom as HTMLCanvasElement,
-			w = dom.clientWidth,
-			h = dom.clientHeight;
-
-		let ctx = <CanvasPainter>canvas.getContext('2d');
-		if (w != this.m_iwidth || h != this.m_iheight) {
-			// adjustment for HDPI
-			let devicePixelRatio = window.devicePixelRatio || 1;
-			let backingStoreRatio = (<any>ctx).webkitBackingStorePixelRatio ||
-				(<any>ctx).mozBackingStorePixelRatio ||
-				(<any>ctx).msBackingStorePixelRatio ||
-				(<any>ctx).oBackingStorePixelRatio ||
-				(<any>ctx).backingStorePixelRatio || 1;
-
-			let canvas = this.canvas;
-
-			if (devicePixelRatio !== backingStoreRatio || this.m_scale != 1.0) {
-				let ratio = devicePixelRatio / backingStoreRatio,
-					rw = w * ratio,
-					rh = h * ratio;
-
-				canvas.setAttribute('width', '' + rw);
-				canvas.setAttribute('height', '' + rh);
-				canvas.setStyleValue('width', w);
-				canvas.setStyleValue('height', h);
-
-				ratio *= this.m_scale;
-				ctx.scale(ratio, ratio);
-			}
-			else {
-				canvas.setAttribute('width', '' + w);
-				canvas.setAttribute('height', '' + h);
-				canvas.setStyleValue('width', w);
-				canvas.setStyleValue('height', h);
-				ctx.scale(1, 1);
-			}
-
-			this.m_iwidth = w;
-			this.m_iheight = h;
-		}
-
-		if (w && h) {
-
-			let cc = mkPainter(ctx, w, h);
-
-			if (this.m_props.autoClear) {
-				cc.clearRect(0, 0, w, h);
-			}
-
-			cc.save();
-			cc.translate(-0.5, -0.5);
-			this.paint(cc);
-			cc.restore();
-		}
-	}
-
-	protected paint(ctx: CanvasPainter) {
-		try {
-			if (this.m_props.painter) {
-				this.m_props.painter(ctx);
-			}
-			else {
-				this.emit('paint', EvPaint(ctx));
-			}
-		}
-		catch (x) {
-			console.assert(false, x);
-		}
-	}
-}

package/lib/src/cardview.ts

@@ -1,227 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @file cardview.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, CEventMap } from './component'
-import { EvChange } from './x4events'
-
-import { IconID } from './icon'
-import { asap, isFunction } from './tools'
-
-export type PageOrCallback = Component | (() => Component);
-
-export interface ICardViewItem {
-	icon?: IconID;
-	name: string,
-	title: string;
-	page: PageOrCallback; // pre builded page
-}
-
-
-interface CardViewEventMap extends CEventMap {
-	change?: EvChange;	// value is page name
-}
-
-export interface CardViewProps extends CProps<CardViewEventMap> {
-	pages: ICardViewItem[];
-	active?: string;
-}
-
-interface ICardItemEx extends ICardViewItem {
-	selector: Component;
-	active: boolean;
-}
-
-/**
- * Standard CardView class
- * a card view is composed of multiples pages with only one visible at a time.
- * pages can be selected by a component (like tabs ou sidebar).
- * or by code.
- */
-
-export class CardView<P extends CardViewProps = CardViewProps, E extends CardViewEventMap = CardViewEventMap> extends Component<P, E>
-{
-	protected m_cards: ICardItemEx[];
-	protected m_ipage: string;	// initialy selected page
-	protected m_cpage: ICardItemEx;	// currently selected page
-
-	constructor(props: P) {
-		super(props);
-
-		this.m_cards = [];
-		this.m_ipage = props.active;
-		this.m_cpage = null;
-
-		this.singleShot(() => {
-			this.setPages(props.pages);
-		});
-	}
-
-	/** @ignore */
-	render() {
-
-		let pages = [];
-		this.m_cards.forEach((p) => {
-			if (p.page) {
-				pages.push(p.page);
-			}
-		});
-
-		this.setContent(pages);
-	}
-
-	/**
-	 * switch to a specific card
-	 * @param name - card name as define in constructor
-	 */
-
-	public switchTo(name?: string) {
-
-		if (this.m_cards.length == 0) {
-			return;
-		}
-
-		if (name === undefined) {
-			name = this.m_cards[0].name;
-		}
-
-		if (name === this.m_cpage?.name) {
-			return;
-		}
-
-		// hide old one
-		if (this.m_cpage) {
-			if (this.m_cpage.selector) {
-				this.m_cpage.selector.removeClass('@active');
-			}
-
-			if (this.m_cpage.page && !(this.m_cpage.page instanceof Function)) {
-				let page = <Component>this.m_cpage.page;
-				page.removeClass('@active');
-				page.addClass('@hidden');
-			}
-		}
-
-		this.m_cpage = this.m_cards.find((card) => card.name == name);
-
-		if (this.m_cpage) {
-			if (this.m_cpage.page) {
-				if (isFunction(this.m_cpage.page)) {
-					this.m_cpage.page = this.m_cpage.page();
-					console.assert(this.m_cpage.page != null, 'You must return a valid component');
-				}
-
-				let page = this.m_cpage.page as Component;
-				page.addClass('@active');
-				page.removeClass('@hidden');
-
-				if (!page.dom) {
-					this._preparePage(page);
-				}
-
-				if (this.m_cpage.selector) {
-					this.m_cpage.selector.addClass('@active');
-				}
-			}
-
-			this.emit('change', EvChange(this.m_cpage.name));
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	setPages(pages: ICardViewItem[]) {
-		let active = this._initTabs(pages);
-		if (active) {
-			asap(() => {
-				this.switchTo(active)
-				this.update();
-			});
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	private _initTabs(pages): any {
-
-		if (!pages) {
-			return;
-		}
-
-		let active = this.m_ipage;
-
-		pages.forEach((p) => {
-
-			if( !p ) {
-				return;
-			}
-
-			let card: ICardItemEx = { ...p };
-
-			card.selector = this._prepareSelector(p);
-			card.active = false;
-
-			this.m_cards.push(card);
-
-			if (!active) {
-				active = p.name;
-			}
-
-			if (p.active) {
-				active = p.name;
-			}
-		});
-
-		return active;
-	}
-
-	protected _updateSelector() {
-	}
-
-	/**
-	 * prepare the cardinfo
-	 * can be used by derivations to create & set selectors
-	 */
-
-	protected _prepareSelector(card: ICardViewItem): Component {
-		return null;
-	}
-
-	/**
-	 * 
-	 */
-
-	protected _preparePage(page: Component) {
-		page.setStyleValue('flex', 1);
-		page.addClass('@tab-page');
-	}
-}