x4js 1.4.2

package/src/drawtext.ts

@@ -0,0 +1,342 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file drawtext.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 { deferCall, Point, Rect, roundTo } from './tools'
+
+// adapted & modified from Canvas-txt: 
+// https://github.com/geongeorge/Canvas-Txt/blob/master/src/index.js
+
+// Hair space character for precise justification
+const SPACE = '\u200a';
+
+export interface DrawTextStyle {
+	align?: 'left' | 'center' | 'right' | 'justify',
+	vAlign?: 'top' | 'middle' | 'bottom',
+	fontSize?: number,				// in pixels
+	fontWeight?: number | 'bold' | 'light' | 'normal',	// in em (fontHeight)
+	fontStyle?: string,
+	fontVariant?: string,
+	fontFamily?: string,
+	lineHeight?: number,
+	clip?: boolean,
+	columns?: number;
+	columnGap?: number;
+	lineBreak?: boolean;
+	rotation?: number;
+}
+
+const defStyle: DrawTextStyle = {
+	align: 'center',
+	vAlign: 'middle',
+	fontSize: 14,
+	fontWeight: null,
+	fontStyle: '',
+	fontVariant: '',
+	fontFamily: 'Arial',
+	lineHeight: 0,
+	clip: true,
+	columns: 1,
+	columnGap: 0,
+	lineBreak: true,
+};
+
+/**
+ *
+ */
+
+interface ITextWord {
+	width: number; // word width
+	text: string;	// text to print
+}
+
+interface ITextLine {
+	width: number;		// line width
+	words: ITextWord[];	// words in line
+	space: number;		// space between words
+	last?: boolean;
+}
+
+export function drawText(ctx: CanvasRenderingContext2D, input_Text: string, rc: Rect, drawStyle: DrawTextStyle) {
+
+	if (rc.width <= 0 || rc.height <= 0) {
+		//width or height or font size cannot be 0
+		return
+	}
+
+	//console.time( 'drawtext' );
+
+	drawStyle = { ...defStyle, ...drawStyle };
+
+	ctx.save();
+
+	if (drawStyle.clip) {
+		ctx.beginPath();
+		ctx.rect(rc.left, rc.top, rc.width, rc.height);
+		ctx.clip();
+	}
+
+	if( drawStyle.rotation ) {
+		const center = new Point(rc.left+rc.width/2, rc.top+rc.height/2);
+		const rad = drawStyle.rotation / 180 * Math.PI;
+
+		ctx.translate( center.x, center.y );
+		ctx.rotate( rad );
+		ctx.translate( -center.x, -center.y );
+		
+		//ctx.beginPath();
+		//ctx.rect( rc.left, rc.top, rc.width, rc.height );
+		//ctx.stroke( );
+	}
+
+	ctx.textBaseline = 'bottom';
+
+	// End points
+	let fontSize = roundTo(drawStyle.fontSize, 2) ?? 12;
+	//let style = `${drawStyle.fontStyle ?? ''} ${drawStyle.fontVariant ?? ''} ${drawStyle.fontWeight ?? ''} ${fontSize}px ${drawStyle.fontFamily ?? 'arial'}`;
+	let style = '';
+
+	if( drawStyle.fontStyle )   {style += drawStyle.fontStyle + ' ';}
+	if( drawStyle.fontVariant ) {style += drawStyle.fontVariant + ' ';}
+	if( drawStyle.fontWeight ) {style += drawStyle.fontWeight + ' ';}
+	style += fontSize + 'px ';
+
+	let family = drawStyle.fontFamily ?? 'sans-serif';
+	if( family.indexOf('.')>0 ) {
+		family = '"'+family+'"';
+	}
+
+	style += family;
+	ctx.font = style.trim();
+
+	let textarray: ITextLine[] = [];
+	let lines = input_Text.split('\n');
+
+	const columns = drawStyle.columns < 1 ? 1 : drawStyle.columns;
+	const gap = drawStyle.columnGap;
+
+	let col_width = (rc.width - gap * (columns - 1)) / columns;
+	let col_left = rc.left;
+	let hlimit = col_width;
+
+	if( !drawStyle.lineBreak ) {
+		hlimit = 99999999;
+	}
+
+	const spaceW = _measureText(ctx, ' ' );
+
+	lines.forEach((text) => {
+
+		let line: ITextLine = { width: 0, words: [], space: 0 };
+
+		// fit in width ?
+		let lwidth = _measureText(ctx, text);
+		if (lwidth < hlimit) {
+			line.width = lwidth;
+			line.words.push({ width: lwidth, text });
+			textarray.push(line);
+		}
+		// break line to fit in width
+		else {
+			// make word list & measure them
+			let twords = text.split(/\s/).filter(w => w !== '');
+			
+			let words: ITextWord[] = twords.map( w => {
+				const wwidth = _measureText(ctx, w );
+				const word: ITextWord = {
+					width: wwidth,
+					text: w
+				};
+				return word;
+			});
+
+			// then compute lines 
+			let n = 0;
+			let e = 0;
+
+			while (n < words.length) {
+
+				const word = words[n];
+				let test = line.width;
+				if( test ) {
+					test += spaceW;
+				}
+				test += word.width;
+
+				//console.log( word, test, col_width );
+				if (test > col_width && e > 0) {
+					textarray.push(line);
+
+					// restart
+					e = 0;
+					lwidth = 0;
+					line = { width: 0, words: [], space: 0 };
+				}
+				else {
+					line.words.push(word);
+					line.width = test;
+					n++;
+					e++;
+				}
+			}
+
+			if (e) {
+				textarray.push(line);
+				line.last = true;
+			}
+		}
+	});
+
+	const textSize = _calcTextHeight(ctx, "Ag");
+	let lineHeight = (drawStyle.lineHeight??1.3) * textSize; 	// * 1.2 = map to pdf 
+	const nlines = textarray.length;
+
+	// calc vertical Align
+	let col_top = rc.top;
+
+	if (columns == 1) {
+		
+		let fullHeight = lineHeight * nlines;
+		if( nlines==1 ) {
+			lineHeight = textSize;
+			fullHeight = textSize;
+		}
+		
+		if (drawStyle.vAlign === 'middle') {
+			col_top = rc.top + rc.height / 2 - fullHeight / 2;
+			col_top += lineHeight / 2;
+			ctx.textBaseline = 'middle';
+		}
+		else if (drawStyle.vAlign === 'bottom') {
+			if (fullHeight < rc.height) {
+				col_top = rc.top + rc.height - fullHeight + lineHeight;
+			}
+		}
+		else { 
+			col_top = rc.top;
+			ctx.textBaseline = 'top';
+		}
+	}
+	else {
+		// always top, cannot justify multi-columns vertically
+		// todo: for now
+		col_top += textSize;
+	}
+
+	const justify = drawStyle.align == 'justify';
+
+	let column = columns;
+	let y = col_top;
+	let align = 0;
+
+	// faster test..
+	switch (drawStyle.align) {
+		case 'right': align = 1; break;
+		case 'center': align = 2; break;
+	}
+
+	//print all lines of text
+	let idx = 1, yy = 0;
+	textarray.some( line => {
+
+		//console.log( idx++, yy );
+
+		line.space = spaceW;
+		if (justify && !line.last) {
+			_justify(line, col_width, spaceW);
+		}
+
+		let x = col_left;
+		if (align == 1) { 
+			x += col_width - line.width; 
+		}
+		else if (align == 2) { 
+			x += col_width / 2 - line.width / 2; 
+		}
+
+		// ...debug
+		/*ctx.lineWidth = 1;
+		ctx.beginPath( );
+		ctx.moveTo( rc.left, y );
+		ctx.lineTo( rc.right, y );
+		ctx.strokeStyle = 'white';
+		ctx.stroke( );*/
+
+		line.words.forEach(w => {
+			/*ctx.beginPath( );
+			ctx.moveTo( x, y );
+			ctx.lineTo( x, y-40 );
+			ctx.strokeStyle = 'red';
+			ctx.stroke( );*/
+
+			/*ctx.beginPath( );
+			ctx.moveTo( x+w.width, y );
+			ctx.lineTo( x+w.width, y-40 );
+			ctx.strokeStyle = 'green';
+			ctx.stroke( );*/
+
+			ctx.fillText(w.text, x, y);
+			x += w.width + line.space;
+		});
+
+		y += lineHeight;
+		yy += lineHeight;
+
+		if (y > (rc.bottom+lineHeight) ) {
+			y = col_top;
+			col_left += col_width + gap;
+			if( --column==0 ) {
+				return true;
+			}
+		}
+	} )
+
+	ctx.restore();
+
+	//console.timeEnd( 'drawtext' );
+
+	// todo autogrow + multi-columns
+	return { height: (textarray.length+0.3) * lineHeight };
+}
+
+// Calculate Height of the font
+function _calcTextHeight(ctx: CanvasRenderingContext2D, text: string) {
+	const size = ctx.measureText(text);
+	return size.actualBoundingBoxAscent+size.actualBoundingBoxDescent;
+}
+
+function _measureText(ctx: CanvasRenderingContext2D, text: string) {
+	return roundTo(ctx.measureText(text).width,2);
+}
+
+function _justify(line: ITextLine, width: number, spaceW: number ) {
+
+	let delta = (width - line.width) / (line.words.length - 1) + spaceW;
+	if (delta <= 0) {
+		return;
+	}
+
+	line.width = width;
+	line.space = delta;
+}

package/src/fileupload.ts

@@ -0,0 +1,208 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file fileupload.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 } from './component'
+
+import { HLayout } from './layout'
+import { Input } from './input'
+import { Image } from './image'
+
+// ============================================================================
+// [FILEUPLOAD]
+// ============================================================================
+
+export interface FileUploadProps extends CProps {
+	name: string;
+	value: string;
+}
+
+export class FileUpload extends HLayout<FileUploadProps> {
+	constructor(props: FileUploadProps) {
+		super(props);
+	}
+
+	clear() {
+		this.m_props.value = '';
+	}
+}
+
+/**
+ * 
+ */
+
+export class ImageUpload extends FileUpload {
+
+	private m_path: any;
+	private m_ui_img: Image;
+	private m_ui_input: Input;
+
+	/** @ignore */
+	render(props: FileUploadProps) {
+
+		let ename = "up" + this.uid;
+
+		this.setContent([
+
+			new Component({
+				tag: 'label', attrs: { for: ename }, content: [
+					this.m_ui_img = new Image({ src: this.m_props.value }),
+				]
+			}),
+
+			this.m_ui_input = new Input({
+				cls: '@hidden',
+				id: ename,
+				type: 'file',
+				name: this.m_props.name,
+				value_hook: {
+					get: () => { return this._get_value() },
+					set: (v) => { this._set_value(v); }
+				},
+				attrs: {
+					accept: 'image/*'
+				},
+				dom_events: {
+					change: (e) => { this._handleChange(e) }
+				}
+			}),
+		]);
+	}
+
+	clear() {
+		super.clear();
+		(<HTMLInputElement>this.m_ui_input.dom).value = '';
+		this.m_ui_img.setImage(null, false);
+	}
+
+	private _get_value() {
+		return this.m_path;
+	}
+
+	private _set_value(v) {
+		debugger;
+	}
+
+	private _handleChange(e) {
+
+		let self = this;
+		function createThumbnail(file) {
+
+			let reader = new FileReader();
+			reader.addEventListener('load', (e) => {
+				self.m_ui_img.setImage(reader.result.toString());
+			});
+
+			reader.readAsDataURL(file);
+		}
+
+		const allowedTypes = ['png', 'jpg', 'jpeg', 'gif'];
+
+		let files = e.target.files,
+			filesLen = files.length;
+
+		for (let i = 0; i < filesLen; i++) {
+
+			let imgType: string = files[i].name.split('.');
+			imgType = imgType[imgType.length - 1];
+			imgType = imgType.toLowerCase();
+
+			if (allowedTypes.indexOf(imgType) != -1) {
+				createThumbnail(files[i]);
+				this.m_path = files[i];
+				break;
+			}
+		}
+	}
+}
+
+let g_file_input: Component = null;
+
+function _createFileInput() {
+	if (!g_file_input) {
+		g_file_input = new Component({
+			tag: 'input',
+			style: {
+				display: 'none',
+				id: 'fileDialog',
+			},
+			attrs: {
+				type: 'file'
+			}
+		});
+
+		// ajoute un input type:file caché pour pouvoir choir un fichier a ouvrir
+		document.body.appendChild(g_file_input._build());
+	}
+
+	g_file_input.clearDomEvent('change');
+	return g_file_input;
+}
+
+/**
+ * show openfile dialog
+ * @param extensions - string - ex: '.doc,.docx'
+ * @param cb - callback to call when user select a file
+ */
+
+export function openFile(extensions: string, cb: (filename: FileList) => void, multiple = false) {
+
+	let fi = _createFileInput();
+
+	fi.removeAttribute('nwsaveas');
+	fi.setAttribute('accept', extensions);
+	fi.setAttribute('multiple', multiple);
+
+	// Set up the file chooser for the on change event
+	fi.setDomEvent("change", (evt) => {
+		// When we reach this point, it means the user has selected a file,
+		let files = (<HTMLInputElement>fi.dom).files
+		cb(files);
+	});
+
+	fi.dom.click();
+}
+
+/**
+ * open saveas dialog
+ * @param defFileName - string - proposed filename 
+ * @param cb - callback to call when user choose the destination
+ */
+
+export function saveFile(defFileName: string, extensions: string, cb: (filename: File) => void) {
+
+	let fi = _createFileInput();
+	fi.setAttribute('nwsaveas', defFileName);
+	fi.setAttribute('accept', extensions);
+
+	// Set up the file chooser for the on change event
+	fi.setDomEvent("change", (evt) => {
+		// When we reach this point, it means the user has selected a file,
+		let files = (<HTMLInputElement>fi.dom).files
+		cb(files[0]);
+	});
+
+	fi.dom.click();
+}
+