x4js 1.4.2

package/src/canvas.ts

@@ -0,0 +1,501 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file canvas.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+import { Component, CProps, CEventMap, html } from './component'
+import { BasicEvent, EventCallback } from './x4_events'
+
+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(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(_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(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(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(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(fs: number) {
+	let fsize = Math.round(fs) + 'px';
+	this.font = this.font.replace(/\d+px/, fsize);
+}
+
+function circle(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/src/cardview.ts

@@ -0,0 +1,220 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file cardview.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+import { Component, CProps, CEventMap } from './component'
+import { EvChange } from './x4_events'
+
+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);
+				}
+			}
+
+			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');
+	}
+}