x4js 2.0.13 → 2.0.14

package/src/components/calendar/calendar.module.scss

@@ -0,0 +1,163 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file calendar.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";
+
+:root {
+	--calendar-btn-background: inherit;
+	--calendar-btn-color: var( --text-secondary );
+	--calendar-btn-color-hover: var( --text-primary );
+
+	--calendar-week-color: var( --accent-background );
+	--calendar-week-color-hover: var( --accent-background-hover );
+
+	--calendard-day-background-hover: var( --accent-background-hover );
+	--calendard-day-color-hover: var( --accent-color-hover );
+
+	--calendar-sel-background: var( --accent-background );
+	--calendar-sel-color: var( --accent-color );
+
+	--calendar-today-background: var( --alert-background );
+	--calendar-today-color: var( --alert-color );
+	--calendar-today-border: var( --accent-background );
+
+	--calendar-header-color: var( --text-primary );
+	--calendar-out-color: var( --disabled-color-dark );
+}
+
+.x4calendar {
+	border: 1px solid var( --border );
+	padding: 4px;
+	
+	.month-sel {
+		height: 2em;
+		align-items: center;
+		padding-left: 2em;
+
+		.month {
+			padding-right: 4px;
+		}
+
+		.year {
+			cursor: pointer;
+		}
+
+		.month, 
+		.year {
+			cursor: pointer;
+			&:hover {
+				text-decoration: underline;		
+			}
+		}
+				
+		.x4label {
+			font-weight: bold;
+		}
+
+		.x4button {
+			height: auto;
+			background-color: var( --calendar-btn-background );
+			color: var( --calendar-btn-color );
+
+			&:hover {
+				color: var( --calendar-btn-color-hover );
+			}
+		}
+
+		margin-bottom: 8px;
+	}
+
+	.week {
+		@extend .flex;
+		align-items: center;
+		padding: 2px;
+				
+		.cell {
+			@extend .flex;
+			min-width: 28px;
+			min-height: 28px;
+			
+			color: var( --gray-900 );
+			text-align: center;
+			
+			.text {
+				@extend .hbox;
+
+				transition: background-color 0.3s, color 0.3s;
+				justify-content: center;
+				border: 1px solid transparent;
+				margin: auto;
+				border-radius: 14px;
+				width: 28px;
+				height: 28px;
+			}
+		}
+		
+		.today {
+			.text {
+				font-weight: bold;
+				background-color: var( --calendar-today-background );
+				color: var( --calendar-today-color );
+				//border-color: var( --calendar-today-border );
+			}
+		}
+
+		.selection {
+			.text {
+				background-color: var( --calendar-sel-background );
+				color: var( --calendar-sel-color );
+			}
+		}
+
+		.weeknum {
+			width: 2em;
+			color: var( --calendar-week-color );
+			font-size: 70%;
+		}
+
+		&:hover .weeknum {
+			font-weight: bold;
+		}
+
+		.day {
+			cursor: pointer;
+		}
+
+		.out {
+			color: var( --calendar-out-color );
+			font-size: 80%;
+		}
+
+		.day:hover {
+			.text {
+				background-color: var( --calendard-day-background-hover );
+				color: var( --calendard-day-color-hover );
+			}
+		}
+	}
+
+	.header {
+		.cell {
+			color: var( --calendar-header-color );
+			height: 1.5em;
+			justify-content: center;
+		}
+
+		&:hover {
+			background-color: inherit;
+		}
+	}	
+}

package/src/components/calendar/calendar.ts

@@ -0,0 +1,327 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file calendar.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, ComponentEvents, ComponentProps, EvChange, Flex } from '../../core/component'
+import { class_ns, date_clone, date_hash, formatIntlDate, Point, unsafeHtml } from "../../core/core_tools"
+import { _tr } from '../../core/core_i18n';
+import { EventCallback } from '../../core/core_events.js';
+
+import { Button } from '../button/button';
+import { Label } from '../label/label';
+import { HBox, VBox } from '../boxes/boxes'
+import { Menu, MenuItem } from '../menu/menu';
+
+import "./calendar.module.scss"
+
+import icon_prev from "./chevron-left-sharp-light.svg";
+import icon_today from "./calendar-check-sharp-light.svg";
+import icon_next from "./chevron-right-sharp-light.svg";
+
+interface CalendarEventMap extends ComponentEvents {
+	change?: EvChange;
+}
+
+
+interface CalendarProps extends ComponentProps {
+	date?: Date;	// initial date to display
+	minDate?: Date;	// minimal date before the user cannot go
+	maxDate?: Date;	// maximal date after the user cannot go
+
+	change?: EventCallback<EvChange>; // shortcut to events: { change: ... }
+}
+
+
+/**
+ * default calendar control
+ * 
+ * fires:
+ * 	EventChange ( value = Date )
+ */
+
+@class_ns( "x4" )
+export class Calendar extends VBox<CalendarProps, CalendarEventMap>
+{
+	private m_date: Date;
+
+	constructor(props: CalendarProps) {
+		super(props);
+
+		this.mapPropEvents( props, 'change' );
+		this.m_date = props.date ? date_clone( props.date ) : new Date();
+
+		this._update( );
+	}
+
+	/** @ignore */
+
+	private _update( ) {
+
+		let month_start = date_clone(this.m_date);
+		month_start.setDate(1);
+
+		let day = month_start.getDay();
+		if (day == 0) {
+			day = 7;
+		}
+
+		month_start.setDate(-day + 1 + 1);
+		let dte = date_clone(month_start);
+
+		let selection = date_hash( this.m_date );
+		let today = date_hash( new Date() );
+
+		let month_end = date_clone(this.m_date);
+		month_end.setDate(1);
+		month_end.setMonth(month_end.getMonth() + 1);
+		month_end.setDate(0);
+
+		let end_of_month = date_hash(month_end);
+
+		let rows: HBox[] = [];
+
+		// month selector
+		let header = new HBox({
+			cls: 'month-sel',
+			content: [
+				new Label({
+					cls: 'month',
+					text: formatIntlDate(this.m_date, 'O'),
+					dom_events: {
+						click: () => this._choose('month')
+					}
+				}),
+				new Label({
+					cls: 'year',
+					text: formatIntlDate(this.m_date, 'Y'),
+					dom_events: {
+						click: () => this._choose('year')
+					}
+				}),
+				new Flex( ),
+				new Button({ icon: icon_prev, click: () => this._next(false) } ),
+				new Button({ icon: icon_today, click: () => this.setDate(new Date()), tooltip: _tr.global.today } ),
+				new Button({ icon: icon_next, click: () => this._next(true) } )
+			]
+		});
+
+		rows.push(header);
+
+		// calendar part
+		let day_names = [];
+
+		// day names
+		// empty week num
+		day_names.push(new HBox({
+			cls: 'weeknum cell',
+		}));
+
+		for (let d = 0; d < 7; d++) {
+			day_names.push(new Label({
+				cls: 'cell',
+				text: _tr.global.day_short[(d + 1) % 7]
+			}));
+		}
+
+		rows.push(new HBox({
+			cls: 'week header',
+			content: day_names
+		}));
+
+		let cmonth = this.m_date.getMonth();
+
+		// weeks
+		let first = true;
+		while (date_hash(dte) <= end_of_month) {
+
+			let days: Component[] = [
+				new HBox({ cls: 'weeknum cell', content: new Component({ tag: 'span', content: formatIntlDate(dte, 'w') }) })
+			];
+
+			// days
+			for (let d = 0; d < 7; d++) {
+
+				let cls = 'cell day';
+				if (date_hash(dte) == selection) {
+					cls += ' selection';
+				}
+
+				if (date_hash(dte) == today) {
+					cls += ' today';
+				}
+
+				if (dte.getMonth() != cmonth) {
+					cls += ' out';
+				}
+
+				const mkItem = ( dte: Date ) => {
+					return new HBox({
+						cls,
+						flex: 1,
+						content: new Component({
+							cls: "text",
+							content: unsafeHtml( `<span>${formatIntlDate(dte, 'd')}</span>` ),
+						}),
+						dom_events: {
+							click: () => this.select(dte)
+						}
+					})
+				}
+
+				days.push( mkItem( date_clone( dte ) ) );
+
+				dte.setDate(dte.getDate() + 1);
+				first = false;
+			}
+
+			rows.push(new HBox({
+				cls: 'week',
+				flex: 1,
+				content: days
+			}));
+		}
+
+		this.setContent(rows);
+	}
+
+	/**
+	 * select the given date
+	 * @param date 
+	 */
+
+	private select(date: Date) {
+		this.m_date = date;
+		this.fire('change', {value:date} );
+		this._update();
+	}
+
+	/**
+	 * 
+	 */
+
+	private _next(n: boolean) {
+		this.m_date.setMonth(this.m_date.getMonth() + (n ? 1 : -1));
+		this._update();
+	}
+
+	/**
+	 * 
+	 */
+
+	private _choose(type: 'month' | 'year') {
+
+		let items: MenuItem[] = [];
+
+		if (type == 'month') {
+			for (let m = 0; m < 12; m++) {
+				items.push(({
+					text: _tr.global.month_long[m],
+					click: () => { this.m_date.setMonth(m); this._update(); }
+				}));
+			}
+		}
+		else if (type == 'year') {
+
+			let min = this.props.minDate?.getFullYear() ?? 1900;
+			let max = this.props.maxDate?.getFullYear() ?? 2037;
+
+			for (let m = max; m >= min; m--) {
+				items.push({
+					text: '' + m,
+					click: () => { this.m_date.setFullYear(m); this._update(); }
+				});
+			}
+		}
+
+		let menu = new Menu({
+			items
+		});
+
+		let rc = this.getBoundingRect();
+		menu.displayAt(rc.left, rc.top);
+	}
+
+	getDate() {
+		return this.m_date;
+	}
+
+	setDate(date: Date) {
+		this.m_date = date;
+		this._update();
+	}
+}
+
+
+
+
+/**
+ * default popup calendar
+ * /
+
+export class PopupCalendar extends Popup {
+
+	m_cal: Calendar;
+
+	constructor(props: CalendarProps) {
+		super({ tabIndex: 1 });
+
+		this.enableMask(false);
+
+		this.m_cal = new Calendar(props);
+		this.m_cal.addClass('@fit');
+
+		this.setContent(this.m_cal);
+	}
+
+	// binded
+	private _handleClick = (e: MouseEvent) => {
+		if (!this.dom) {
+			return;
+		}
+
+		let newfocus = <HTMLElement>e.target;
+
+		// child of this: ok
+		if (this.dom.contains(newfocus)) {
+			return;
+		}
+
+		// menu: ok
+		let dest = Component.getElement(newfocus, MenuItem);
+		if (dest) {
+			return;
+		}
+
+		this.close();
+	}
+
+	/ ** @ignore * /
+	show(modal?: boolean, at?: Point ) {
+		x4document.addEventListener('mousedown', this._handleClick);
+		if( at ) {
+			super.displayAt( at.x, at.y, 'top left', undefined, modal );
+		}
+		else {
+			super.show(modal);
+		}
+	}
+
+	/ ** @ignore * /
+	close() {
+		x4document.removeEventListener('mousedown', this._handleClick);
+		super.close();
+	}
+}
+*/

package/src/components/calendar/chevron-left-sharp-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M9.4 256l11.3-11.3 192-192L224 41.4 246.6 64 235.3 75.3 54.6 256 235.3 436.7 246.6 448 224 470.6l-11.3-11.3-192-192L9.4 256z"/></svg>

package/src/components/calendar/chevron-right-sharp-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M310.6 256l-11.3 11.3-192 192L96 470.6 73.4 448l11.3-11.3L265.4 256 84.7 75.3 73.4 64 96 41.4l11.3 11.3 192 192L310.6 256z"/></svg>

package/src/components/canvas/canvas.module.scss

@@ -0,0 +1,25 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file canvas.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2025 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.
+ **/
+
+ .x4canvas {
+	overflow: hidden;
+
+	&> canvas {
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+ }

package/src/components/canvas/canvas.ts

@@ -0,0 +1,189 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file canvas.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2025 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 { class_ns } from '@core/core_tools.js';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
+import { EventCallback } from "../../core/core_events"
+import { CanvasEx, createPainter } from './canvas_ex.js';
+
+import './canvas.module.scss'
+
+export interface EvPaint extends ComponentEvent {
+	ctx: CanvasEx;
+}
+
+interface CanvasEventMap extends ComponentEvents {
+	paint: EvPaint;
+}
+
+interface CanvasProps extends ComponentProps {
+	paint: EventCallback<EvPaint>
+	clear?: boolean;
+}
+
+
+
+// ============================================================================
+// [CANVAS]
+// ============================================================================
+
+/**
+ * Standard Canvas
+ */
+
+@class_ns( "x4" )
+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);
+
+		this.mapPropEvents( props, 'paint' );
+		this.addDOMEvent('resized', () => { this._paint(); })
+		
+		this.m_iwidth = -1;
+		this.m_iheight = -1;
+		this.m_canvas = new Component({
+			tag: 'canvas'
+		});
+
+		this.setContent( this.m_canvas );
+	}
+
+	/**
+	 * 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;
+	}
+
+	getContext( ) {
+		return (this.m_canvas.dom as HTMLCanvasElement).getContext('2d') as CanvasEx;
+	}
+
+	/**
+	 * redraw the canvas (force a paint)
+	 */
+
+	private $update_rep = 0;
+	public redraw(wait?: number) {
+
+		if (wait !== undefined) {
+			if( ++this.$update_rep>=20 ) {
+				this.clearTimeout( 'update' );
+				this._paint( );
+			}
+			else {
+				this.setTimeout( 'update', wait, () => this._paint() );
+			}
+		}
+		else {
+			this.clearTimeout( 'update' );
+			this._paint();
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private _paint() {
+		this.$update_rep = 0;
+
+		let dom = this.dom;
+		if (!this.isVisible() ) {
+			return;
+		}
+
+		//const canvas = this.m_canvas.dom as HTMLCanvasElement;
+		const w = dom.clientWidth;
+		const h = dom.clientHeight;
+
+		const ctx = this.getContext();
+		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 ( this.m_scale != 1.0 ) { //devicePixelRatio !== backingStoreRatio || this.m_scale != 1.0) {
+				let ratio = 1;	//devicePixelRatio / backingStoreRatio,
+				const rw = w * ratio;
+				const 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 = createPainter(ctx, w, h);
+			if (this.props.clear) {
+				
+				cc.clearRect(0,0,w/this.m_scale,h/this.m_scale);
+			}
+
+			cc.save();
+			cc.translate(-0.5, -0.5);
+			this.paint(cc);
+			cc.restore();
+		}
+	}
+
+	protected paint(ctx: CanvasEx ) {
+		try {
+			this.fire('paint', { ctx } );
+		}
+		catch (x) {
+			console.assert(false, x);
+		}
+	}
+}
+