x4js 2.0.18 → 2.0.21

package/lib/src/components/canvas/canvas_ex.ts

@@ -1,276 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.2
- * 
- * @file canvas_ex.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 { Point } from "../../core/core_tools"
-
-export interface CanvasEx 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;
-}
-
-export function createPainter(c2d: CanvasRenderingContext2D, w: number, h: number): CanvasEx {
-
-	let cp = c2d as CanvasEx;
-
-	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) {
-		// eslint-disable-next-line @typescript-eslint/no-this-alias
-		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: Point, p2: Point ) {
-		return {
-			x: p1.x + (p2.x - p1.x) / 2,
-			y: p1.y + (p2.y - p1.y) / 2
-		};
-	}
-
-	function getQuadraticXY(t: number, sx: number, sy: number, cp1x: number, cp1y: number, ex: number, ey: number) : Point {
-		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++) {
-
-		const 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: number[], cache: Float32Array, l: number) {
-
-		for (let i = 2, t; i < l; i += 2) {
-
-			let 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++) {
-
-				let 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) {
-		// eslint-disable-next-line @typescript-eslint/no-this-alias
-		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);
-}

package/lib/src/components/checkbox/check.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-	<path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
-	</path>
-</svg>

package/lib/src/components/checkbox/checkbox.module.scss

@@ -1,142 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file checkbox.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 {
-	--checkbox-background-check: var( --accent-background );
-	--checkbox-background-check-hover: var( --accent-background-hover );
-	--checkbox-background-disabled: var( --disabled-color );
-	--checkbox-background-disabled-check: var( --disabled-background );
-	--checkbox-color-disabled: var( --disabled-background );
-	--checkbox-check-border: var( --border );
-	--checkbox-check-border-hover: var( --border-hover );
-}
-
-.x4checkbox {
-	@extend .hbox;
-	
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	margin: 5px;
-	padding: 4px;
-	gap: 4px;
-	cursor: pointer;
-	
-	.inner {
-		height: 1rem;
-		width: 1rem;
-		color: white;
-		position: relative;
-		order: 1;
-		
-		input {
-			appearance: none;
-			outline: none;
-			
-			cursor: pointer;
-			display: block;
-			margin: 0;
-			padding: 0;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			transition: opacity .1s ease;
-
-			&:checked {
-				background-color: var( --checkbox-background-check );
-			}
-
-			&:checked:hover {
-				background-color: var( --checkbox-background-check-hover );
-			}
-
-			&:not(:checked) {
-				border: 1px solid var( --checkbox-check-border );
-			}
-
-			&:not(:checked):hover {
-				border: 1px solid var( --checkbox-check-border-hover );
-			}
-		}
-
-		svg {
-			margin: auto;
-			pointer-events: none;
-			position: absolute;
-			opacity: 0;
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			width: 100%;
-			height: 50%;
-		}
-
-		&:has(input:checked) {
-			input {
-				opacity: 1;
-			}
-
-			svg {
-				opacity: 1;
-			}
-		}
-	}
-
-	&:focus-within {
-		label #text {
-			text-decoration: underline;
-		}
-	}
-
-	&[disabled] {
-		&, * {
-			cursor: not-allowed;
-		}
-			
-		label {
-		
-			pointer-events: none;
-			color: var( --checkbox-color-disabled );
-		}
-
-		.inner {
-			pointer-events: none;
-			input {
-				background-color: var( --checkbox-background-disabled );
-			
-				&:checked {
-					background-color: var( --checkbox-background-disabled-check );
-				}
-			}
-		}
-	}
-
-	label {
-		text-align: right;
-		cursor: inherit;
-		order: 2;
-	}
-
-	&.left #label {
-		order: 0;
-		text-align: left;
-	}
-}

package/lib/src/components/checkbox/checkbox.ts

@@ -1,140 +0,0 @@
-import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component.js';
-import { EventCallback } from '../../core/core_events.js';
-
-import { Input } from '../input/input';
-import { Label } from '../label/label';
-
-import { svgLoader } from '../icon/icon.js';
-
-import "./checkbox.module.scss"
-import icon from "./check.svg";
-import { class_ns } from '@core/core_tools.js';
-
-/**
- * Checkbox events
- */
-
-interface CheckBoxEvents extends ComponentEvents {
-	change?: EvChange;
-}
-
-/**
- * Checkbox properties.
- */
-
-interface CheckboxProps extends ComponentProps {
-	label: string; 			// The text label for the checkbox.
-	checked?: boolean;		// Optional boolean indicating if the checkbox is checked by default.
-	value?: boolean | number | string;			// Optional value associated with the checkbox.
-	name?: string;
-	change?: EventCallback<EvChange>;
-}
-
-/**
- * Checkbox component that can be checked or unchecked.
- */
-
-@class_ns( "x4" )
-export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
-	readonly _input: Input;
-
-	/**
-     * Creates an instance of the Checkbox component.
-     * 
-     * @param {CheckboxProps} props - The properties for the checkbox component, including label, checked state, and value.
-     * @example
-     * const checkbox = new Checkbox({ label: 'Accept Terms', checked: true });
-     */
-
-	constructor( props: CheckboxProps ) {
-		super( props );
-
-		const inputId = makeUniqueComponentId( );
-
-		this.mapPropEvents( props, 'change' );
-
-		this.setContent( [
-			new Component( {
-				cls: 'inner',
-				content: [
-					this._input = new Input( { 
-						type:"checkbox", 
-						id: inputId, 
-						name: props.name,
-						checked: props.checked,
-						dom_events: {
-							change: ( ) => this._on_change( ),
-						}
-					})
-				] 
-			}),
-			new Label( { 
-				tag: 'label',
-				text: props.label, 
-				labelFor: inputId, 
-				id: undefined 
-			} ),
-		])
-
-		svgLoader.load( icon ).then( svg => {
-			this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", svg );
-		});
-
-		this.addDOMEvent('click', (e) => this._on_click(e));	// for outside click
-	}
-
-	/**
-	 * handle click outside label & input
-	 */
-	
-	protected _on_click( ev: MouseEvent ) {
-		if( ev.target==this.dom ) {
-			(this._input.dom as HTMLInputElement).click( );
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-	}
-
-	/**
-	 * check state changed
-	 */
-
-	private _on_change() {
-		this.fire('change', { value:this.getCheck() } );
-	}
-
-	/**
-	 * @return the checked value
-	 */
-
-	public getCheck() {
-		return this._input.getCheck();
-	}
-
-	/**
-	 * change the checked value
-	 * @param {boolean} ck new checked value	
-	 */
-
-	public setCheck(ck: boolean) {
-		this._input.setCheck( ck );
-	}
-
-	/**
-	 * change the checkbox label
-	 * @param text 
-	 */
-
-	public setLabel(text: string) {
-		this.query<Label>('label').setText( text );
-	}
-
-	/**
-	 * toggle the checkbox
-	 */
-
-	public toggle() {
-		this.setCheck( !this.getCheck() );
-	}
-
-}

package/lib/src/components/colorinput/colorinput.module.scss

@@ -1,65 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file colorinput.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.
- **/
-
-:root {
-	--colorinput-btn-background: inherit;
-	--colorinput-btn-color: var( --text-secondary );
-	--colorinput-btn-color-hover: var( --text-primary );	
-}
-
-.x4colorinput {
-	margin: 5px;
-	border-bottom: 1px solid var( --border );
-	outline: none;
-
-	&:focus-within {
-		border-bottom-color: var( --border-focus );
-	}
-
-	.swatch {
-		margin: 4px;
-		width: 1rem;
-		height: 1rem;
-	}
-
-	input {
-		outline: none;
-		margin: 0;
-		height: 100%;
-		flex-grow: 1;
-	}
-
-	.x4button {
-		margin: 0;
-		padding: 0;
-		outline: none;
-		background-color: var( --combobox-btn-background );
-		color: var( --colorinput-btn-color );
-
-		#icon {
-			color: var( --colorinput-btn-color );
-		}
-
-		&:hover, &:hover #icon {
-			color: var( --colorinput-btn-color-hover );
-		}
-
-		&:focus {
-			//background-color: var( --color-30 );
-			//color: var( --color-10 );
-		}
-	}
-}

package/lib/src/components/colorinput/colorinput.ts

@@ -1,91 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file colorinput.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 } from '../../core/component';
-import { isFeatureAvailable, class_ns } from '../../core/core_tools.js';
-import { Color } from '../../core/core_colors';
-
-import { BoxProps, HBox } from '../boxes/boxes';
-import { Input } from '../input/input.js';
-import { Button } from '../button/button.js';
-
-
-import "./colorinput.module.scss"
-import icon from "./crosshairs-simple-sharp-light.svg"
-
-//TODO: add swatches
-//TODO: better keyboard handling (selection after cursor)
-
-/**
- * 
- */
-
-interface ColorInputProps extends BoxProps {
-	color: Color | string;
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class ColorInput extends HBox<ColorInputProps> {
-	static "$cls-ns" = "x4";
-
-	constructor( props: ColorInputProps ) {
-		super( props );
-
-		let swatch: Component;
-		let edit: Input;
-
-		this.setContent( [
-			swatch = new Component( { cls: "swatch" } ),
-			edit = new Input( { type: "text", value: "", spellcheck: false } ),
-
-			isFeatureAvailable("eyedropper") ? new Button( { icon: icon, click: ( ) => {
-				const eyeDropper = new (window as any).EyeDropper();
-				eyeDropper.open( ).then( ( result: any ) => {
-					color = new Color( result.sRGBHex );
-					updateColor( color );
-				});
-			} } ) : null
-		])
-
-		edit.addDOMEvent( "input", ( ) => {
-			const txt = edit.getValue( );
-			const clr = new Color( txt );
-			if( !clr.isInvalid() ) {
-				color = clr;
-				updateColor( color );
-			}
-		});
-
-		const updateColor = ( clr: Color ) => {
-			swatch.setStyleValue( "backgroundColor", clr.toRgbString(false) );
-			edit.setValue( clr.toRgbString(false) );
-		}
-
-		let color: Color;
-		if( props.color instanceof Color ) {
-			color = props.color;
-		}
-		else {
-			color = new Color( props.color );
-		}
-
-		updateColor( color );
-	}
-}

package/lib/src/components/colorinput/crosshairs-simple-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M479.4 240L384 240l-16 0 0 32 16 0 95.4 0C471.6 383 383 471.6 272 479.4l0-95.4 0-16-32 0 0 16 0 95.4C129 471.6 40.4 383 32.6 272l95.4 0 16 0 0-32-16 0-95.4 0C40.4 129 129 40.4 240 32.6l0 95.4 0 16 32 0 0-16 0-95.4C383 40.4 471.6 129 479.4 240zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>